/* ==========================================================================
   Zach's ReSkate: design tokens
   Two brand colours (from the icon): blue #0090FE and violet #7C3AED.
   Everything else is a tinted neutral built around hue ~268 (between the two).
   Theme: follows the OS; <html data-theme="light|dark"> (set by the toggle) overrides it.
   ========================================================================== */
@layer reset, tokens, base, layout, components, utilities;

/* ---- fonts (self-hosted WOFF2, Latin subset; Archivo, Geist and Geist Mono are SIL OFL 1.1; built by tools/make-fonts.py) ----
   The display face is four STATIC instances of Archivo italic, not one variable font: engines disagree on width-axis support
   (font-stretch), and the design only needs these fixed combinations. Each file is ~9 KB; only the first is preloaded. */
@font-face { font-family: "Archivo Display";    src: url("../fonts/archivo-display-900-66.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo Display MD"; src: url("../fonts/archivo-display-800-70.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo Display XL"; src: url("../fonts/archivo-display-900-62.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo Wide";       src: url("../fonts/archivo-wide-800-100.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks: while a webfont loads, the page uses a system face scaled so text wraps the same way and the swap
   doesn't move anything. size-adjust = measured width ratio webfont/system font (Chrome, 14 headings / 4 paragraphs / 4 mono labels);
   ascent/descent = webfont hhea metrics / size-adjust. Display has two bases because Arial Narrow isn't everywhere. */
@font-face { font-family: "Archivo Fallback N"; src: local("Arial Narrow Bold Italic"), local("ArialNarrow-BoldItalic"); font-weight: 700 900; font-style: italic; size-adjust: 91.4%; ascent-override: 96.1%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback A"; src: local("Arial Bold Italic"), local("Arial-BoldItalicMT"); font-weight: 700 900; font-style: italic; size-adjust: 74.8%; ascent-override: 117.4%; descent-override: 28.1%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400 500; size-adjust: 102.1%; ascent-override: 98.4%; descent-override: 28.9%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 700; size-adjust: 102.1%; ascent-override: 98.4%; descent-override: 28.9%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"); font-weight: 400 600; size-adjust: 100%; ascent-override: 100.5%; descent-override: 29.5%; line-gap-override: 0%; }

@layer tokens {
  :root {
    color-scheme: light dark;

    /* ---- brand ---- */
    --blue: oklch(0.6486 0.1918 251.6);          /* #0090FE */
    --violet: oklch(0.5413 0.2466 293);          /* #7C3AED */

    /* ---- surfaces & lines ---- */
    --bg:         light-dark(oklch(0.972 0.007 265), oklch(0.145 0.016 268));
    --bg-sunk:    light-dark(oklch(0.945 0.010 265), oklch(0.115 0.014 268));
    --surface:    light-dark(oklch(0.992 0.003 265), oklch(0.185 0.018 268));
    --line:       light-dark(oklch(0.2 0.03 268 / 0.10), oklch(0.9 0.03 268 / 0.10));
    --line-2:     light-dark(oklch(0.2 0.03 268 / 0.18), oklch(0.9 0.03 268 / 0.20));
    --hair-hi:    light-dark(oklch(1 0 0 / 0.7), oklch(0.85 0.06 255 / 0.09));   /* top-edge highlight, blue-tinted on dark */

    /* ---- text (4 tiers; every tier >= 4.5:1 on --bg and --surface) ---- */
    --text:       light-dark(oklch(0.200 0.025 268), oklch(0.965 0.006 268));
    --text-2:     light-dark(oklch(0.400 0.025 268), oklch(0.820 0.012 268));
    --text-3:     light-dark(oklch(0.500 0.025 268), oklch(0.700 0.014 268));

    /* ---- accents as text / UI (deeper on light so they pass AA) ---- */
    --blue-text:   light-dark(oklch(0.52 0.19 252), oklch(0.76 0.14 250));
    --violet-text: light-dark(oklch(0.5413 0.2466 293), oklch(0.80 0.12 295));
    --blue-display:   light-dark(oklch(0.52 0.20 252), var(--blue));             /* big headline words: >= 5:1 on every surface */
    --violet-display: light-dark(var(--violet), oklch(0.66 0.21 293));
    --ring:        light-dark(oklch(0.52 0.19 252), oklch(0.76 0.14 250));
    --on-blue:     oklch(0.16 0.03 262);                                         /* ink on brand blue: 5.9:1 (white would be 3.3:1) */
    --pill:        oklch(0.985 0.004 285);                                       /* the logo's white pill */
    --blue-soft:   color-mix(in oklab, var(--blue) 14%, transparent);
    --violet-soft: color-mix(in oklab, var(--violet) 16%, transparent);

    /* ---- status (semantic only) ---- */
    --ok:   light-dark(oklch(0.52 0.13 155), oklch(0.78 0.15 155));
    --warn: light-dark(oklch(0.50 0.11 70),  oklch(0.84 0.14 85));
    --warn-bg: light-dark(oklch(0.96 0.04 85), oklch(0.24 0.05 80));

    /* ---- depth: shadows only exist on light (their colours are transparent on dark; there depth = lighter surfaces) ---- */
    --sh-a: light-dark(oklch(0.25 0.04 268 / 0.07), transparent);
    --sh-b: light-dark(oklch(0.25 0.06 268 / 0.16), transparent);
    --underglow: light-dark(transparent, color-mix(in oklab, var(--blue) 42%, transparent));
    --shadow-1: 0 1px 2px var(--sh-a);
    --shadow-2: 0 1px 2px var(--sh-a), 0 10px 28px -14px var(--sh-b);
    --shadow-3: 0 2px 4px var(--sh-a), 0 28px 60px -24px var(--sh-b);

    /* ---- type ---- */
    --font-display: "Archivo Display", "Archivo Fallback N", "Archivo Fallback A", "Arial Narrow", Arial, sans-serif;           /* 900, width 66 */
    --font-display-md: "Archivo Display MD", "Archivo Fallback N", "Archivo Fallback A", "Arial Narrow", Arial, sans-serif;   /* 800, width 70 */
    --font-display-xl: "Archivo Display XL", "Archivo Fallback N", "Archivo Fallback A", "Arial Narrow", Arial, sans-serif;   /* 900, width 62 */
    --font-badge: "Archivo Wide", "Archivo Fallback A", Arial, sans-serif;                                                    /* 800, width 100 */
    --font-body: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SFMono-Regular", Consolas, monospace;

    --fs-base: 1.0625rem;
    --fs-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
    --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --fs-h2: clamp(2.5rem, 1.5rem + 4.6vw, 4.75rem);
    --fs-h1: clamp(3.1rem, 1.35rem + 6.6vw, 7.5rem);
    --fs-num: clamp(3.25rem, 2rem + 4.6vw, 6rem);

    /* ---- space (4px base) ---- */
    --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;
    --section-y: clamp(4.5rem, 3rem + 5.6vw, 8.5rem);
    --gutter: clamp(1.25rem, 0.85rem + 1.8vw, 2.5rem);
    --gap: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);
    --container: 1240px;
    --nav-h: 56px;
    --nav-offset: 12px;

    /* ---- shape ---- */
    --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-pill: 999px;

    /* ---- motion (strong ease-outs; UI 120-320ms, reveals 450-800ms) ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-ui: cubic-bezier(0.25, 1, 0.5, 1);
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 560ms;
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-3: 120ms; --dur-4: 200ms; }
  }
}