/* Vivarium design tokens — mirrored from the Claude Design project
   "Vivarium Design System" (6ff72def-698d-468c-973c-f4378307787a), tokens/*.css.
   Keep this file a faithful copy. Site-only styling belongs in site.css. */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Space+Mono:wght@400;700&display=swap");

:root {
  /* ── Neutrals: chrome is deep ink so saturated cards read as posters ── */
  --ink-900: oklch(0.16 0.014 165);
  --ink-800: oklch(0.21 0.016 165);
  --ink-700: oklch(0.27 0.016 165);
  --ink-600: oklch(0.36 0.014 165);
  --paper-100: oklch(0.97 0.008 120);
  --paper-200: oklch(0.90 0.010 120);
  --paper-300: oklch(0.78 0.012 120);

  /* ── Card field colors. EXACTLY FOUR. Never add a fifth. ── */
  --moss-field: oklch(0.50 0.132 152);
  --moss-contrast: oklch(0.88 0.190 118);
  --tidepool-field: oklch(0.74 0.126 197);
  --tidepool-contrast: oklch(0.36 0.118 254);
  --dusk-field: oklch(0.40 0.130 278);
  --dusk-contrast: oklch(0.80 0.170 72);
  --ember-field: oklch(0.71 0.180 46);
  --ember-contrast: oklch(0.33 0.120 344);

  /* ── Per-card foreground: near-black or near-white, never mid-gray ── */
  --on-light: oklch(0.17 0.030 150);
  --on-dark: oklch(0.97 0.012 120);

  /* ── Semantic aliases ── */
  --surface-app: var(--ink-900);
  --surface-raised: var(--ink-800);
  --surface-sunken: oklch(0.13 0.012 165);
  --text-body: var(--paper-100);
  --text-muted: var(--paper-300);
  --border-hairline: var(--ink-700);
  --focus-ring: var(--moss-contrast);
  --accent: var(--moss-contrast);
  --status-active: var(--moss-contrast);
  --status-warn: var(--dusk-contrast);
  --status-danger: oklch(0.62 0.200 26);

  --alpha-body: 0.7;
  --alpha-meta: 0.55;

  /* ── Type: two weights, no exceptions ── */
  --font-sans: "Outfit", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --weight-regular: 400;
  --weight-bold: 700;

  --size-display: 44px;
  --size-title: 34px;
  --size-card-title: 30px;
  --size-section: 22px;
  --size-body: 15px;
  --size-meta: 13px;
  --size-micro: 11px;

  --leading-tight: 1.02;
  --leading-snug: 1.18;
  --leading-body: 1.34;

  --tracking-display: -0.022em;
  --tracking-title: -0.018em;
  --tracking-body: 0em;
  --tracking-mono: 0.06em;
  --tracking-caps: 0.12em;

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --gutter-page: 56px;
  --gap-card-row: 20px;
  --pad-card: 26px;

  /* ── Radii: nothing below 12px, ever ── */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-card: 28px;
  --radius-pill: 999px;
  --radius-glyph: 14px;
  --ring-width: 6px;
  --hairline: 1px;

  /* ── Motion ── */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-ring: 520ms;
  --lift-hover: -4px;
  --scale-hover: 1.02;
  --scale-press: 0.985;
}