/* Design tokens.
   Colors, fonts and radii below are only FALLBACKS: the real values come from
   content/site.json (theme.*) and are injected into <head> by `npm run sync`.
   Layout and type scales live here. */

:root {
  /* theme (overridden from content/site.json) */
  --outer-bg: #eceae5;
  --bg: #080808;
  --surface: #101010;
  --surface-2: #171717;
  --border: rgba(255, 255, 255, 0.1);
  --text: #f5f5f5;
  --text-2: #969696;
  --text-3: #656565;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Inter Display', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --radius-canvas: 32px;
  --radius-frame: 20px;
  --radius-card: 12px;

  /* derived */
  --text-meta: #858585; /* readable small text: between secondary and muted (>= 4.5:1 on the dark surfaces) */
  --border-strong: rgba(255, 255, 255, 0.2);
  --radius-pill: 999px;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-blur: 16px;

  /* layout */
  --outer-pad: clamp(8px, 1.1vw, 16px);
  --gutter: clamp(20px, 4.2vw, 72px);
  --col-gap: clamp(12px, 1.6vw, 24px);
  --max-w: 1560px;
  --nav-offset: 20px;
  --nav-h: 44px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* fluid type scale */
  --fs-micro: 0.6875rem;
  --fs-small: 0.8125rem;
  --fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem);
  --fs-h2: clamp(2.6rem, 1.2rem + 5.2vw, 6.75rem);
  --fs-display: clamp(2.75rem, 0.9rem + 7vw, 7.75rem);
  --track-display: -0.045em;
}

@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --text-meta: color-mix(in srgb, var(--text-2) 68%, var(--text-3));
  }
}