/* ============================================================
   ELLEVUX · DESIGN TOKENS  (v5 — PERSONAL PORTFOLIO, Henri Heymans style)
   The single source of truth. Pure-black editorial canvas, white type,
   ONE acid-green accent (chartreuse #c8fa3c) used SPARINGLY, hairline rules.
   Bold uppercase grotesque (Inter) + italic serif accents (Instrument Serif).
   Squared / minimal radii, oversized display type, generous black space.
   Never hard-code a color, radius, font, or duration — always use a token.
   ============================================================ */

:root {
  /* ---------- Core surfaces — PURE BLACK ---------- */
  --bg:        #000000;        /* page base — pure black */
  --bg-soft:   #0a0a0a;        /* near-black raised sections / cards */

  /* ---------- Text ---------- */
  --text:      #ffffff;        /* primary — white */
  --text-soft: #b3b3b3;        /* secondary — AA on black, safe for body */
  --text-mut:  #7a7a7a;        /* muted / captions (large or decorative) */

  /* ---------- Accent — ONE acid-green (chartreuse), sparing ---------- */
  --accent:      #c8fa3c;                       /* the only color on the page */
  --accent-ink:  #0a0a0a;                       /* near-black text ON the accent (AA) */
  --accent-soft: rgba(200, 250, 60, 0.14);      /* faint accent wash */
  --accent-line: rgba(200, 250, 60, 0.55);      /* accent hairlines / outlines */

  /* ---------- Hairlines / structural rules ---------- */
  --line:        rgba(255, 255, 255, 0.16);     /* default hairline */
  --line-strong: rgba(255, 255, 255, 0.28);     /* emphasised hairline */
  --line-faint:  rgba(255, 255, 255, 0.08);     /* whisper rule */

  /* ---------- Typography ----------
     Inter = bold uppercase grotesque (Helvetica-like) for everything display
     + body. Instrument Serif (italic) = the signature accent on select words. */
  --font-sans:  'Inter', Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* ---------- Fluid type scale (clamp: min, fluid, max) ----------
     Editorial = HUGE display. --fs-hero drives the 3-line headline;
     --fs-mega drives the giant footer wordmark (bleeds, up to ~22vw). */
  --fs-mega:    clamp(4.5rem, 22vw, 22rem);     /* footer "Ellevux" wordmark */
  --fs-hero:    clamp(2.8rem, 8vw, 9rem);       /* hero headline (bigger — fills the space the blob held) */
  --fs-display: clamp(2.4rem, 1rem + 6.4vw, 7rem); /* big section titles ("SELECTED WORKS"). vw-proportional so the long word "Selected" cannot overflow on phones; ~108px on desktop, ~40px at 375. */
  --fs-h1:      clamp(2.25rem, 1.6rem + 3.4vw, 4.5rem);
  --fs-h2:      clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  --fs-h3:      clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem);
  --fs-lead:    clamp(1.1rem, 0.98rem + 0.6vw, 1.5rem);   /* bio / lead copy */
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-label:   0.72rem;        /* nav / work labels (uppercase, tracked) */

  --lh-tight:   0.92;           /* huge display headlines, tight stacked lines */
  --lh-snug:    1.15;
  --lh-base:    1.55;           /* body copy */

  --tracking-tight: -0.03em;    /* big grotesque headlines */
  --tracking-wide:  0.18em;     /* small uppercase labels / nav */
  --tracking-wider: 0.26em;     /* tiniest tracked microcopy */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;       /* display headlines + wordmarks */

  /* ---------- Spacing scale (8px rhythm, generous) ---------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;   --s-11: 10rem;   --s-12: 14rem;
  --section-y: clamp(5rem, 3rem + 10vw, 11rem);     /* generous vertical band */

  /* ---------- Layout ---------- */
  --container:      1280px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);

  /* ---------- Radii — SQUARED / minimal (editorial) ---------- */
  --r-xs:   2px;   --r-sm: 4px;   --r-md: 8px;   --r-lg: 12px;   --r-xl: 16px;
  --r-pill: 999px;                /* the only round thing: pills/chips */

  /* ---------- Motion ---------- */
  --dur-fast:    0.2s;
  --dur-base:    0.35s;
  --dur-slow:    0.6s;
  --dur-ambient: 2.4s;            /* slow ambient loops (outside interaction band) */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---------- z-index scale ---------- */
  --z-content: 1;
  --z-nav:     100;
  --z-overlay: 9600;

  /* ---------- blur ---------- */
  --blur-md: 14px;

  /* ---------- Legacy alias still referenced by component CSS ---------- */
  --text-muted: var(--text-mut);
}

/* Honor user motion preference globally (component-level loops also gated) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0.001s;
    --dur-base:   0.001s;
    --dur-slow:   0.001s;
  }
}