/* ==========================================================================
   ESCAN INTERNATIONAL — Design Tokens
   Source of truth: Escan Brand Guidelines (2025–2026) + logo artwork hexes.
   All three homepage concepts consume these tokens; concepts may extend
   but must not redefine brand hues.
   ========================================================================== */

:root {
  /* ---- Brand palette (logo facets, exact) ---------------------------- */
  --c-purple:  #7060A4;  /* Royal Purple — upper-left facet, accent A     */
  --c-indigo:  #5B5C86;  /* Deep Indigo — top facet                       */
  --c-slate:   #6184A0;  /* Slate Blue — lower-left facet                 */
  --c-teal:    #367982;  /* Teal Blue — bottom facet, deep backgrounds    */
  --c-aqua:    #7DBFBB;  /* Aqua Mist — right facet, heading accent       */
  --c-sage:    #A9CBBC;  /* Pale Sage — upper-right facet (sampled; guide
                            misprints this swatch, flagged to client)     */
  --c-charcoal:#2B2B2B;  /* Brand charcoal — text on light               */

  /* ---- Derived neutrals (tints/shades of brand hues) ----------------- */
  --c-ink:     #1E1F21;  /* deep charcoal canvas for cinematic sections   */
  --c-ink-2:   #26272A;  /* raised surface on ink                         */
  --c-ink-3:   #313236;  /* borders/dividers on ink                       */
  --c-paper:   #F2F3F1;  /* brand light canvas (~guide #F0F1F2)           */
  --c-paper-2: #FAFAF9;  /* raised surface on paper                       */
  --c-mist:    #E4E7E4;  /* hairlines on paper                            */

  /* ---- Deep brand-color surfaces (guide full-bleed pages) ------------ */
  --c-teal-deep:   #24545B;  /* teal shade for immersive bands            */
  --c-indigo-deep: #41425F;  /* indigo shade                              */
  --c-purple-deep: #4E4374;  /* purple shade                              */

  /* ---- Functional text colors ---------------------------------------- */
  --t-strong-on-dark: #F4F5F3;
  --t-body-on-dark:   rgba(244, 245, 243, 0.72);
  --t-faint-on-dark:  rgba(244, 245, 243, 0.45);
  --t-strong-on-light: var(--c-charcoal);
  --t-body-on-light:   #4A4B4D;
  --t-faint-on-light:  #7B7D7F;

  /* ---- Typography -----------------------------------------------------
     EN: Bahnschrift variable (wght 300–700, wdth 75–100).
     AR (future): GE SS Unique Light/Bold — see fonts.css.               */
  --font-en: "Bahnschrift", "DIN Next", "Segoe UI", system-ui, sans-serif;
  --font-ar: "GE SS Unique", "Bahnschrift", system-ui, sans-serif;

  /* Fluid type scale (min @360px viewport → max @1680px) */
  --fs-hero:    clamp(2.75rem, 1.15rem + 7.1vw, 8rem);      /* display   */
  --fs-h1:      clamp(2.25rem, 1.35rem + 4vw, 5.5rem);
  --fs-h2:      clamp(1.75rem, 1.15rem + 2.7vw, 3.75rem);
  --fs-h3:      clamp(1.25rem, 1rem + 1.1vw, 2rem);
  --fs-lead:    clamp(1.063rem, 0.95rem + 0.5vw, 1.375rem);
  --fs-body:    clamp(0.938rem, 0.9rem + 0.2vw, 1.063rem);
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;      /* uppercase kickers/eyebrows */
  --fs-stat:    clamp(2.5rem, 1.5rem + 4.5vw, 6rem);

  --lh-tight:  1.02;
  --lh-heading:1.12;
  --lh-body:   1.65;

  --ls-label:  0.18em;        /* letterspaced caps, echoes E S C A N mark */
  --ls-display:-0.01em;

  /* Weight conventions (Bahnschrift variable axis) */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- Spacing scale -------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.5rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-section: clamp(4.5rem, 3rem + 7vw, 10rem);   /* vertical rhythm   */
  --sp-gutter:  clamp(1.25rem, 4vw, 4rem);          /* page inline pad   */
  --content-max: 100rem;                             /* 1600px cap        */
  --measure: 62ch;                                   /* body copy width   */

  /* ---- Shape ----------------------------------------------------------
     Brand geometry is the 60°/hexagon system. --chamfer is the signature
     cut-corner treatment (hexagon edge); radius tokens for soft UI.      */
  --chamfer: 1.25rem;
  --radius-s: 0.375rem;
  --radius-m: 0.75rem;
  --radius-l: 1.25rem;
  --radius-pill: 100rem;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.25, 1, 0.5, 1);     /* general exits    */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);    /* line reveals     */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);    /* panel moves      */
  --dur-fast: 0.25s;
  --dur-med:  0.55s;
  --dur-slow: 1.1s;

  /* ---- Elevation / misc ------------------------------------------------ */
  --shadow-card: 0 1.5rem 3.5rem rgba(30, 31, 33, 0.16);
  --z-nav: 100;
  --z-menu: 110;
  --z-cursor: 130;
  --z-loader: 140;

  color-scheme: light;
}