/* =========================================================================
   LGD DESIGN TOKENS
   Single source of truth. Every future page (Services, Work, Blog, About,
   Contact, Academy) loads THIS file first and inherits everything below.
   Never hardcode a hex value anywhere else in the codebase.
   ========================================================================= */

:root {
  /* ---------- Brand palette (from LGD's real brand kit) ---------- */
  --color-black:     #000000;   /* true black — matches the logo background */
  --color-surface:   #0E0E0E;   /* lifted black for cards/panels */
  --color-surface-2: #151513;   /* second elevation, section banding */
  --color-gold:      #FED504;   /* THE accent. Never drift to amber/orange. */
  --color-gold-dim:  #B99B03;   /* muted gold — secondary text/icons on dark */
  --color-white:     #FFFFFF;
  --color-off-white: #F2F2F0;   /* light-surface sections */

  /* Derived gold alphas — always sampled from --color-gold, never re-picked */
  --gold-04: rgba(254, 213, 4, 0.04);
  --gold-08: rgba(254, 213, 4, 0.08);
  --gold-14: rgba(254, 213, 4, 0.14);
  --gold-24: rgba(254, 213, 4, 0.24);
  --gold-40: rgba(254, 213, 4, 0.40);
  --gold-64: rgba(254, 213, 4, 0.64);

  /* ---------- Glass / depth ---------- */
  --glass-bg:      rgba(254, 213, 4, 0.08);
  --glass-bg-soft: rgba(255, 255, 255, 0.035);
  --glass-border:  rgba(254, 213, 4, 0.16);
  --glass-blur:    18px;

  --shadow-panel: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  --shadow-gold:  0 0 0 1px var(--gold-24), 0 18px 60px -20px rgba(254, 213, 4, 0.35);
  --glow-text:    0 0 32px rgba(254, 213, 4, 0.45);

  /* ---------- Text colours on dark ---------- */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.66);
  --text-muted:     rgba(255, 255, 255, 0.42);
  --hairline:       rgba(255, 255, 255, 0.09);

  /* ---------- Type families ---------- */
  --font-display: 'Poppins', 'Segoe UI', sans-serif;              /* 800–900 */
  --font-mono:    'Space Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---------- Fluid type scale ---------- */
  --fs-display:  clamp(2.75rem, 1.1rem + 7.1vw, 7.5rem);
  /* The hero headline is the one type size that must respect viewport HEIGHT
     as well as width: on a 1280x720 laptop a width-only clamp produced a 92px
     H1 that pushed the CTAs below the fold. The inner min() caps it against
     vh so short windows shrink the headline instead of overflowing. */
  --fs-h1:       clamp(2.25rem, min(0.85rem + 4.2vw, 9.6vh), 4.6rem);
  --fs-h2:       clamp(2rem,    1.2rem + 3.3vw, 3.9rem);
  --fs-h3:       clamp(1.35rem, 1.05rem + 1.2vw, 1.95rem);
  --fs-h4:       clamp(1.1rem,  1rem + 0.5vw, 1.35rem);
  --fs-body-lg:  clamp(1.05rem, 0.98rem + 0.42vw, 1.3rem);
  --fs-body:     clamp(0.975rem, 0.94rem + 0.16vw, 1.06rem);
  --fs-small:    0.875rem;
  --fs-eyebrow:  0.72rem;
  --fs-stat:     clamp(2.6rem, 1.5rem + 4.2vw, 4.6rem);

  --lh-tight: 0.98;
  --lh-snug:  1.16;
  --lh-body:  1.68;

  --tracking-display: -0.035em;
  --tracking-mono:     0.34em;   /* echoes "d i g i t a l" in the wordmark */

  /* ---------- Spacing rhythm ---------- */
  --space-2xs: 0.35rem;
  --space-xs:  0.65rem;
  --space-sm:  1rem;
  --space-md:  1.6rem;
  --space-lg:  2.6rem;
  --space-xl:  4.2rem;
  --space-2xl: 6.8rem;
  --section-y: clamp(5rem, 3rem + 9vw, 11rem);

  --container:    1280px;
  --container-nr: 1080px;   /* narrow reading measure */
  --gutter:       clamp(1.15rem, 0.6rem + 2.4vw, 3rem);

  /* ---------- Radii ---------- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  0.22s;
  --dur-mid:   0.45s;
  --dur-slow:  0.9s;

  /* ---------- Layers ---------- */
  --z-canvas:  0;
  --z-content: 2;
  --z-totop:   40;
  --z-header:  60;
  --z-cursor:  90;
  --z-loader:  100;
}

/* Users who prefer less motion get an instant, static site. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.001s;
    --dur-mid:  0.001s;
    --dur-slow: 0.001s;
  }
}