/* Sweep · landing · design tokens
 * Hallmark · macrostructure: Stat-Led · tone: modern-minimal (dev-tool)
 * theme: Cobalt · paper: cool light oklch(98.5% 0.004 250) · accent: electric cobalt oklch(56% 0.20 256)
 * display: Space Grotesk · body: Inter · mono: JetBrains Mono
 * nav: N9 (flush bar, hairline edge) · footer: Ft4 (dense colophon) · enrichment: real app screenshots
 * axes: cool-light / grotesk-sans / chromatic-cobalt
 *
 * Every colour and font in index.html references a token here. No inline
 * oklch()/hex values in the page CSS, so the system stays portable.
 */

:root {
  /* ── Ground ─────────────────────────────────────────────────── */
  --color-page:        oklch(98.5% 0.004 250);
  --color-page-sunk:   oklch(96.5% 0.005 250);
  --color-surface:     oklch(99.5% 0.002 250);

  /* ── Ink ────────────────────────────────────────────────────── */
  --color-ink:         oklch(24% 0.02 258);
  --color-ink-2:       oklch(34% 0.018 257);
  --color-ink-3:       oklch(52% 0.014 256);
  --color-ink-4:       oklch(54% 0.012 254);

  /* ── Rules ──────────────────────────────────────────────────── */
  --color-rule:        oklch(90% 0.006 252);
  --color-rule-strong: oklch(83% 0.008 252);

  /* ── The one signal ─────────────────────────────────────────── */
  /* 56% rather than Cobalt's 58%: at 58% the white button label measures
     4.31:1, under the 4.5:1 that 14px text needs. 56% keeps the cobalt
     signal and carries white at 4.6:1. */
  --color-accent:      oklch(56% 0.20 256);
  --color-accent-deep: oklch(48% 0.19 256);
  --color-accent-text: oklch(52% 0.20 256);
  --color-on-accent:   oklch(99.5% 0.002 250);
  --color-accent-soft: oklch(94% 0.03 256);

  /* ── The one dark beat ──────────────────────────────────────── */
  --color-graphite:       oklch(22% 0.016 260);
  --color-graphite-2:     oklch(27% 0.016 260);
  --color-graphite-rule:  oklch(34% 0.014 258);
  --color-on-graphite:    oklch(93% 0.008 255);
  --color-on-graphite-2:  oklch(72% 0.012 256);

  /* ── Semantic ───────────────────────────────────────────────── */
  /* Syntax tones inside the terminal block. */
  --color-syn-acc: oklch(76% 0.16 256);
  /* The one shadow on the page: the terminal card's barely-there lift. */
  --shadow-lift: 0 1px 2px oklch(24% 0.02 258 / 0.06);

  --color-found:   oklch(72% 0.16 155);
  --color-warn:    oklch(76% 0.15 78);
  --color-danger:  oklch(62% 0.19 25);
  --color-focus:   oklch(58% 0.20 256);

  /* ── Type ───────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.75rem;
  /* The stat is the hero: tabular, tight, and sized to the viewport. */
  --text-stat:  clamp(4.25rem, 15vw, 10rem);
  /* The hero headline. 61 characters, so it caps below the display rung;
     it must still outrank an h2 at every width, which --text-2xl does not. */
  --text-display-s: clamp(2rem, 3.8vw, 2.75rem);

  /* ── Space · 4pt scale ──────────────────────────────────────── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  /* ── Rules & radius ─────────────────────────────────────────── */
  --rule-hair: 1px;
  --radius-sm: 6px;
  --radius-md: 10px;

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  320ms;
  --dur-reveal: 620ms;

  /* ── Layout ─────────────────────────────────────────────────── */
  --page-max: 1120px;
  --page-gutter: var(--space-lg);
  --z-nav: 40;
}

@media (min-width: 768px) {
  :root { --page-gutter: var(--space-xl); }
}