/* ==========================================================================
   DESIGN TOKENS — single source of truth (CLAUDE.md §8)
   All colours, type, spacing, radii, shadows and motion values live here.
   Components must consume these variables instead of hard-coded values.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     A. Colour palette — balance rule: Navy 60% · Neutral 30% · Teal 10%
     --------------------------------------------------------------------- */
  --c-navy:       #02113A; /* Core brand · authority backgrounds · headings */
  --c-deep-teal:  #013E6A; /* Mark base · supporting depth                  */
  --c-teal:       #00A9B6; /* Accent · highlights · interaction             */

  --c-ink:        #0B1F44; /* Headings on light surfaces                    */
  --c-slate:      #5A6B7B; /* Body text on light surfaces                   */
  --c-mist:       #8A98A6; /* Captions · meta                               */
  --c-cloud:      #F4F7F9; /* Cards · panels · alternate light sections     */
  --c-white:      #FFFFFF; /* Surface · reverse                             */

  /* Text on navy / dark surfaces */
  --c-on-dark:        #FFFFFF;
  --c-on-dark-body:   rgba(255, 255, 255, 0.72);
  --c-on-dark-meta:   rgba(255, 255, 255, 0.52);

  /* Translucent helpers (teal glows, glass, hairlines) */
  --c-teal-a08:   rgba(0, 169, 182, 0.08);
  --c-teal-a12:   rgba(0, 169, 182, 0.12);
  --c-teal-a18:   rgba(0, 169, 182, 0.18);
  --c-teal-a25:   rgba(0, 169, 182, 0.25);
  --c-ink-a10:    rgba(11, 31, 68, 0.10);
  --c-ink-a20:    rgba(11, 31, 68, 0.20);
  --c-glass:          rgba(255, 255, 255, 0.06);
  --c-glass-strong:   rgba(255, 255, 255, 0.10);
  --c-glass-border:   rgba(255, 255, 255, 0.14);
  --c-glass-light:    rgba(255, 255, 255, 0.72);

  /* Transmission gradient — ONLY for the F-mark, hero and final-CTA panels */
  --g-transmission: linear-gradient(135deg, #00A9B6 0%, #013E6A 48%, #02113A 100%);

  /* ---------------------------------------------------------------------
     B. Typography
     --------------------------------------------------------------------- */
  --ff-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid scale — capped to avoid oversized type (CLAUDE.md §4.1) */
  --fs-display: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-h2:      clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem);
  --fs-h3:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;

  --lh-heading: 1.18;
  --lh-tight:   1.3;
  --lh-lead:    1.55;
  --lh-body:    1.65;
  --lh-arabic:  1.8;

  --ls-display: -0.02em;
  --ls-h2:      -0.015em;
  --ls-caption: 0.08em;

  --measure:    65ch; /* Max comfortable reading width */

  /* ---------------------------------------------------------------------
     C. Layout & spacing
     --------------------------------------------------------------------- */
  --container:      77.5rem;  /* 1240px */
  --container-wide: 90rem;    /* 1440px media bleed */
  --gutter:         clamp(1rem, 4vw, 2.5rem);
  --section-space:  clamp(4.5rem, 9vw, 8rem);

  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Radii — "engineered-soft" */
  --r-pixel:  2px;    /* Pixel-F motif blocks */
  --r-btn:    10px;
  --r-card:   16px;
  --r-panel:  24px;
  --r-pill:   999px;

  /* Shadows — navy-tinted, never grey/black */
  --shadow-sm:   0 1px 2px rgba(2, 17, 58, 0.06), 0 2px 8px rgba(2, 17, 58, 0.04);
  --shadow-md:   0 8px 24px -6px rgba(2, 17, 58, 0.12);
  --shadow-lg:   0 24px 60px -12px rgba(2, 17, 58, 0.22);
  --shadow-focus: 0 0 0 4px var(--c-teal-a25);

  /* Header height (used for scroll offsets and sticky stages) */
  --header-h: 4.5rem;

  /* Z-index scale */
  --z-base:    1;
  --z-raised:  10;
  --z-header:  100;
  --z-overlay: 200;

  /* ---------------------------------------------------------------------
     D. Motion — mirrored in assets/js/core/motion.js for GSAP
     --------------------------------------------------------------------- */
  --dur-micro:  0.3s;
  --dur-reveal: 0.9s;
  --ease-out:    cubic-bezier(0.215, 0.61, 0.355, 1);   /* ≈ power3.out   */
  --ease-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* ≈ power2.inOut */
}

/* Arabic-ready: roomier leading and no tracking if an Arabic version is
   activated later (an Arabic typeface would be added to the stacks then). */
:root:lang(ar) {
  --lh-body:    var(--lh-arabic);
  --ls-display: 0;
  --ls-h2:      0;
}

/* Header grows slightly on larger screens */
@media (min-width: 64rem) {
  :root {
    --header-h: 5rem;
  }
}