/* ============================================================================
   JAVVY LABS — tokens.css
   "Invisible premium" B × C. OKLCH source-of-truth + hex fallbacks.
   Dark = the control surface (default). [data-surface="light"] = quiet-luxe galleries.
   One accent = controlled iris. One easing curve. (ART-DIRECTION §2/§3/§4)
   ============================================================================ */

/* ---- hex fallback layer (old engines / no oklch support) ---- */
:root {
  /* surfaces */
  --surface-0:    #121317;
  --surface-1:    #1a1c22;
  --surface-2:    #24262e;
  --surface-sunk: #0e0f13;

  /* hairline grid + rules (the engineered structure) */
  --grid:        rgba(243, 244, 246, 0.05);  /* the fine background grid — barely there (<=6%) */
  --line:        rgba(243, 244, 246, 0.12);  /* standard hairline */
  --line-strong: rgba(243, 244, 246, 0.22);  /* section / header rule */

  /* text */
  --text-hi:  #f3f4f6;  /* primary */
  --text-mid: #b7b9c0;  /* secondary / body-on-dark */
  --text-low: #898b94;  /* mono labels, meta, captions */

  /* THE ACCENT — controlled iris (brand / CTA / one signal) */
  --accent:     #6b6cf0;                       /* CTA fill / hot word / tick / active */
  --accent-hi:  #8b8cf5;                       /* hover / focus-ring lift */
  --accent-dim: rgba(107, 108, 240, 0.14);     /* tint washes, hover backplates */

  /* hero WebGL field — kept HEX (never overridden in the oklch block) so the
     shader reads clean values via getComputedStyle. Re-skin a client = swap these. */
  --hero-iris:      #6b6cf0;   /* the drifting iris glow */
  --hero-iris-deep: #4e54c4;   /* deeper iris note — depth, never a 2nd hue */

  --success: #4fd1a0;   /* live-pip only */
  --focus:   var(--accent-hi);

  color-scheme: dark;

  /* ---------- type ---------- */
  --font-display: "Clash Display", "Times New Roman", Georgia, serif;
  --font-body:    "General Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.65rem + 3.4vw, 4.5rem);  /* H1  — Clash 600, ls -0.02em, lh 1.08  */
  --fs-h2:      clamp(2.0rem, 1.35rem + 3.0vw, 3.5rem);  /* H2  — Clash 600, ls -0.035em, lh 1.04 */
  --fs-h3:      clamp(1.3rem, 1.08rem + 1.0vw, 1.75rem); /* H3  — General Sans 600, ls -0.015em   */
  --fs-lead:    clamp(1.1rem, 0.98rem + 0.55vw, 1.35rem);/* standfirst / subhead, lh 1.45         */
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.1rem);    /* General Sans 400, lh 1.6              */
  --fs-small:   0.9375rem;
  --fs-mono:    0.8rem;        /* live line / scope lines, ls 0.01em */
  --fs-label:   0.78125rem;    /* indices / datelines — mono, ls 0.08em, UPPER */

  --lh-display: 1.08;
  --lh-h2:      1.04;
  --lh-h3:      1.15;
  --lh-lead:    1.45;
  --lh-body:    1.6;

  --ls-display: -0.02em;
  --ls-h2:      -0.035em;
  --ls-h3:      -0.015em;
  --ls-mono:    0.01em;
  --ls-label:   0.08em;

  --measure:      66ch;   /* body line length */
  --measure-lead: 54ch;   /* standfirst */

  /* ---------- spacing scale (8px harmonic) ---------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --section-pad: clamp(4.5rem, 3rem + 7vw, 9rem); /* per-section vertical rhythm */

  /* ---------- layout ---------- */
  --content-max: 1280px;
  --gutter:      clamp(1.25rem, 4vw, 4rem);
  --rail-w:      56px;            /* left mono index rail (>= lg) */
  --grid-cols:   12;
  --grid-gap:    clamp(1rem, 0.5rem + 1.4vw, 1.75rem);
  --header-h:    72px;

  /* ---------- radii ---------- */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 12px;

  /* ---------- motion ---------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1); /* the ONE curve, soft expo-out */
  --dur-micro: 0.15s;   /* hover/focus micro-states (0.12–0.2s) */
  --dur-enter: 0.2s;    /* entrance reveals — hard cap */

  /* ---------- z-index scale ---------- */
  --z-base:    0;
  --z-grid:    1;
  --z-rail:    5;
  --z-content: 10;
  --z-sticky:  50;
  --z-header:  60;
  --z-overlay: 90;
  --z-skip:    100;
}

/* ---- OKLCH source-of-truth (overrides the hex above where supported) ---- */
@supports (color: oklch(0 0 0)) {
  :root {
    --surface-0:    oklch(0.16 0.012 264);
    --surface-1:    oklch(0.20 0.014 264);
    --surface-2:    oklch(0.25 0.016 264);
    --surface-sunk: oklch(0.13 0.010 264);

    --grid:        oklch(0.92 0.004 264 / 0.05);
    --line:        oklch(0.92 0.004 264 / 0.12);
    --line-strong: oklch(0.92 0.004 264 / 0.22);

    --text-hi:  oklch(0.97 0.004 264);
    --text-mid: oklch(0.78 0.006 264);
    --text-low: oklch(0.60 0.008 264);

    --accent:     oklch(0.62 0.165 274);
    --accent-hi:  oklch(0.70 0.150 276);
    --accent-dim: oklch(0.62 0.165 274 / 0.14);

    --success: oklch(0.78 0.130 165);
  }
}

/* ============================================================================
   LIGHT — quiet-luxe gallery sections (cool paper, NOT cream).
   Applied via [data-surface="light"] on Work + The Face. NOT a global toggle.
   ============================================================================ */
[data-surface="light"] {
  color-scheme: light;

  /* hex fallback */
  --surface-0:    #f6f6f8;
  --surface-1:    #fdfdfe;
  --surface-2:    #ededf1;
  --surface-sunk: #ececf0;

  --grid:        rgba(42, 44, 51, 0.04);
  --line:        rgba(42, 44, 51, 0.10);
  --line-strong: rgba(42, 44, 51, 0.18);

  --text-hi:  #2a2c33;
  --text-mid: #5c5e66;
  --text-low: #6b6d75;   /* AA >=4.5:1 on #f6f6f8 / #fdfdfe small text (hex-fallback path) */

  --accent:     #4f50d6;   /* deepened for AA on paper */
  --accent-hi:  #4143c4;
  --accent-dim: rgba(79, 80, 214, 0.10);

  --success: #2a7d5e;      /* darkened so it clears AA as small text on light paper */
  --focus:   var(--accent);
}

@supports (color: oklch(0 0 0)) {
  [data-surface="light"] {
    --surface-0:    oklch(0.975 0.003 264);
    --surface-1:    oklch(0.995 0.001 264);
    --surface-2:    oklch(0.945 0.005 264);
    --surface-sunk: oklch(0.925 0.006 264);

    --grid:        oklch(0.20 0.014 264 / 0.04);
    --line:        oklch(0.20 0.014 264 / 0.10);
    --line-strong: oklch(0.20 0.014 264 / 0.18);

    --text-hi:  oklch(0.22 0.014 264);
    --text-mid: oklch(0.42 0.012 264);
    --text-low: oklch(0.55 0.010 264);

    --accent:     oklch(0.52 0.180 274);
    --accent-hi:  oklch(0.46 0.185 273);
    --accent-dim: oklch(0.52 0.180 274 / 0.10);

    --success: oklch(0.50 0.130 165);
  }
}

/* ---- prefers-contrast: strengthen hairlines + lift the lowest text tiers ----
   Declared after the @supports(oklch) :root blocks so these win by source order
   on both OKLCH and hex engines (same specificity). Lifts --text-low AND
   --text-mid so high-contrast users get a consistent improvement, not a nudge. */
@media (prefers-contrast: more) {
  :root {
    --line:        rgba(243, 244, 246, 0.24);
    --line-strong: rgba(243, 244, 246, 0.42);
    --text-low:    #b4b6bd;
    --text-mid:    #d2d4da;
  }
  [data-surface="light"] {
    --line:        rgba(42, 44, 51, 0.24);
    --line-strong: rgba(42, 44, 51, 0.42);
    --text-low:    #4c4e56;
    --text-mid:    #3a3c43;
  }
}