/* ============================================================
   everythingreps — Design Tokens (WordPress / GeneratePress)
   HSL components are space-separated; compose at use sites:
     color: hsl(var(--ink) / 0.5);
   ============================================================ */

/* ── Self-hosted Roboto (variable, latin subset). No external font API. ──
   ONE woff2 covers every weight 100–900 (interpolated), so 400/500/600/700/800/900
   all resolve from a single file — no faux weights, no 3-hop @import chain.
   Drop the file at assets/fonts/ (see assets/fonts/README.md). It is <link rel=preload>ed
   in functions.php. font-display:swap → text paints immediately (no FOIT), swaps in
   when the font arrives. Italic (only the decorative mobile .hero__nike) is synthesized.
   unicode-range pins this face to the Latin subset the file actually contains, so any
   stray non-Latin glyph goes straight to the fallback instead of blocking on this face. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Metric-matched fallback (reduces CLS before Roboto swaps in). ──
   Wraps the local system font (Arial metrics) and overrides its box metrics to
   match Roboto, so the pre-swap system-ui render occupies almost the same space
   — near-zero reflow when the real font arrives. Referenced in the font stacks
   below, BEFORE system-ui. Overrides are Roboto's published Arial-fallback values. */
@font-face {
  font-family: "Roboto Fallback";
  src: local("Arial");
  ascent-override: 92.77%;
  descent-override: 24.41%;
  line-gap-override: 0%;
  size-adjust: 100.06%;
}

:root {
  /* ── Core palette ── */
  --background: 220 7% 96.5%;
  --foreground: 222 39% 13%;
  --secondary: 220 24% 94%;
  --secondary-foreground: 222 39% 13%;
  --muted: 219 24% 93%;
  --muted-foreground: 217 18% 37%;
  --accent: 220 22% 94%;
  --accent-foreground: 222 39% 13%;
  --destructive: 0 75% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 219 18% 83%;
  --input: 218 25% 88%;
  --ring: 222 39% 13%;

  /* aliases used throughout the system */
  --ink: var(--foreground);
  --paper: var(--background);
  --line: 219 18% 83%;

  /* ── Solid surfaces ── */
  --surface: 220 30% 99%;
  --surface-muted: 220 22% 96%;
  --card: 220 30% 99%;
  --card-foreground: 222 39% 13%;
  --section-alt: 220 16% 96%;
  --cta-dark: 222 47% 11%;
  --cta-dark-foreground: 0 0% 100%;

  /* ── Semantic status ── */
  --success: 160 84% 25%;
  --success-foreground: 0 0% 100%;
  --warning: 43 96% 56%;
  --warning-foreground: 30 67% 11%;
  --info: 199 89% 48%;
  --info-foreground: 0 0% 100%;

  /* ── Radius scale ── */
  --radius: 1rem;
  --radius-sm: 0.75rem;
  --radius-md: 0.875rem;
  --radius-lg: 1rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* ── Shadow vocabulary ── */
  --shadow-xs: 0 1px 2px 0 hsl(222 39% 13% / 0.04);
  --shadow-sm: 0 8px 20px -18px hsl(222 39% 13% / 0.15);
  --shadow-md: 0 18px 40px -30px hsl(222 39% 13% / 0.22);
  --shadow-lg: 0 28px 64px -36px hsl(222 39% 13% / 0.24);
  --shadow-xl: 0 36px 80px -44px hsl(222 39% 13% / 0.28);

  /* ── Motion ── */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.30, 1);
  --duration-instant: 120ms;
  --duration-fast: 160ms;
  --duration-base: 200ms;
  --duration-slow: 280ms;
  --duration-deliberate: 400ms;

  /* ── Type families ── */
  --font-display: "Roboto", "Roboto Fallback", system-ui, sans-serif;
  --font-sans:    "Roboto", "Roboto Fallback", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Layout ── */
  --shell: 1280px;       /* max content width */
  --topbar-h: 34px;      /* announcement bar height */
  --header-h: 66px;      /* main header height */
}