/* ---------------------------------------------------------------------------
   APS Gulf design tokens - LIGHT corporate theme
   Palette is taken from the logo: navy pentagon, orange mark, gold highlight.
   --------------------------------------------------------------------------- */

:root {
  /* --- brand --- */
  --color-navy:        #2F578B;
  --color-navy-dark:   #24466F;
  --color-navy-soft:   rgba(47, 87, 139, 0.08);
  --color-navy-line:   rgba(47, 87, 139, 0.18);

  --color-orange:      #EF5736;
  --color-orange-dark: #d8452a;
  --color-orange-soft: rgba(239, 87, 54, 0.10);

  /* Ink variants, for TEXT below ~18px only.
     Brand orange measures 3.45:1 on white - fine against the 3:1 bar for large
     text, buttons, rules and icons, but short of the 4.5:1 bar for small text.
     Note --color-orange-dark is NOT a safe hover partner for these: it is only
     4.37:1, so hovering an ink link would drop it back under AA.
         #EF5736  3.45:1   #d8452a 4.37:1
         #C43F22  5.15:1   #A6331B 6.75:1      (all on #FFFFFF)
     On the #F5F6F8 band the ink still measures 4.76:1. */
  --color-orange-ink:      #C43F22;
  --color-orange-ink-dark: #A6331B;

  --color-gold:        #FBB22F;
  --color-gold-soft:   rgba(251, 178, 47, 0.16);

  /* --- surfaces --- */
  --color-bg:          #FFFFFF;
  --color-surface:     #F5F6F8;
  --color-border:      #E5E8ED;

  /* --- text --- */
  --color-text:        #1F2937;
  --color-text-mut:    #5B6472;
  --color-heading:     #2F578B;

  /* ---------------------------------------------------------------------
     Aliases kept from the dark build so every existing selector keeps
     working. Only the values changed, which is what makes this a restyle
     rather than a rewrite.
     --------------------------------------------------------------------- */
  --color-surface-light:  #FAFBFC;
  --color-accent:         var(--color-orange);
  --color-accent-hover:   var(--color-orange-dark);
  --color-accent-dark:    var(--color-orange-dark);
  --color-accent-soft:    var(--color-orange-soft);
  --color-accent-faint:   rgba(239, 87, 54, 0.05);
  --color-accent-gold:    var(--color-gold);
  --color-accent-gold-soft: var(--color-gold-soft);

  --color-text-primary:   var(--color-text);
  --color-text-secondary: var(--color-text-mut);
  --color-text-tertiary:  #6B7480;
  --color-text-muted:     #8A93A0;

  --color-border-hover:   var(--color-orange);
  --color-header-bg:      rgba(255, 255, 255, 0.92);
  --color-header-border:  var(--color-border);

  /* --- typography ---
     Thin weights read as elegant on black and as weak on white, so the
     headings move from 200 to 500-600 for the light theme. */
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Vazirmatn is the Persian face, chosen over Estedad after an A/B (the two
     measured within ~3% on em box, so the choice was aesthetic). Estedad was
     removed entirely on 2026-08-01. */
  --font-fa: 'Vazirmatn', 'Inter', Tahoma, sans-serif;
  --font-sans: var(--font-en);

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  /* Hierarchy by weight, not just by size: the display sizes carry real
     presence while body text stays at 400 so the contrast between them does
     the work. Inter is a variable font here, so these are exact, not snapped. */
  --fw-display:      680;   /* hero h1 */
  --fw-heading:      640;   /* section h2 */
  --fw-heading-sm:   560;   /* card h3/h4 */
  --fw-light:     400;   /* legacy alias - nothing should look thin now */

  /* Fluid at the top of the scale, fixed at the bottom. The ratio is ~1.24
     through the middle and opens up for the two display sizes, which is what
     stops the page reading as one undifferentiated block of text. */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.1875rem;
  --fs-lg:   1.5rem;
  --fs-xl:   clamp(1.75rem, 2.4vw, 2.05rem);
  --fs-2xl:  clamp(2rem,  3.4vw, 2.75rem);
  --fs-3xl:  clamp(2.6rem, 5.2vw, 4rem);

  /* Large type needs more negative tracking than small type, not the same. */
  --ls-display: -0.032em;
  --ls-tight:   -0.022em;
  --ls-normal:  -0.006em;
  --ls-wide:     0.02em;

  --lh-display: 1.08;
  --lh-tight:   1.2;
  --lh-normal:  1.7;
  --lh-loose:   1.85;

  /* --- rhythm --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --container:      1280px;
  --container-pad:  clamp(1rem, 4vw, 3rem);
  /* Fallback only. app.js measures the live header into --header-h-real, which
     is what .aps-site-main actually uses - these static values were wrong by
     7px in English and 9px in Persian after the logo grew, and would drift
     again on any type change. 144px is the measured desktop height. */
  --header-h:       144px;
  --header-h-mobile: 84px;   /* the wordmark is 2.85:1, it needs the room */

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --blur-header: 14px;

  /* --- elevation, the light theme's substitute for the dark theme's borders --- */
  --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.05);
  --shadow:    0 2px 10px rgba(31, 41, 55, 0.06), 0 1px 2px rgba(31, 41, 55, 0.04);
  --shadow-md: 0 8px 20px rgba(47, 87, 139, 0.10);
  --shadow-lg: 0 14px 34px rgba(47, 87, 139, 0.14);
  --shadow-header: 0 2px 14px rgba(31, 41, 55, 0.08);

  --t-fast:  0.18s;
  --t-base:  0.25s;
  --t-slow:  0.35s;
  --t-slower: 0.5s;      /* reveal duration */
  --ease:    cubic-bezier(0.33, 0, 0.2, 1);

  --z-progress: 1000;
  --z-header:   900;
  --z-menu:     890;
}

html[dir="rtl"],
html[lang^="fa"] {
  --font-sans: var(--font-fa);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-base: 0.01ms;
    --t-slow: 0.01ms;
    --t-slower: 0.01ms;
  }
}