/* =============================================================================
   TOKENS — Latents design system
   -----------------------------------------------------------------------------
   Derived from an analysis of makingsoftware.com (Dan Hollick). That site's
   published CSS exposes its full token layer; the values below are the ones we
   adopted or adapted. See design-system/notes.md for the mapping and for the
   substitutions we made (notably the typefaces, which are licensed there).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------------------
     COLOR — Cobalt
     A single chromatic ramp. Everything else is black at an opacity.
     oklch is authoritative; hex comments are sRGB approximations for reference.
     ------------------------------------------------------------------------ */
  --cobalt-50: oklch(97.05% 0.0054 274.97);  /* ≈ #f4f5f9 */
  --cobalt-100: oklch(94.22% 0.0275 274.66); /* ≈ #e6ebff */
  --cobalt-200: oklch(83.76% 0.0774 273.32); /* ≈ #b9c7fd */
  --cobalt-300: oklch(76.12% 0.1218 272.4);  /* ≈ #97acff */
  --cobalt-400: oklch(63.79% 0.1899 269.89); /* ≈ #6080fd */
  --cobalt-500: oklch(57.66% 0.2443 267.62); /* ≈ #3a63ff */
  --cobalt-600: oklch(50.58% 0.2886 264.84); /* ≈ #1342ff — primary */
  --cobalt-700: oklch(47.65% 0.3102 264.11); /* ≈ #1038d9 */

  --amber-200: oklch(92.4% 0.12 95.746); /* selection only */

  /* Surfaces and ink. Paper, not white. */
  --background: #fbfbfb;
  --foreground: #171717;

  /* Semantic aliases — prefer these in components. */
  --ink: #000;
  --ink-muted: color-mix(in oklab, var(--ink) 50%, transparent);
  --ink-subtle: color-mix(in oklab, var(--ink) 25%, transparent);
  --ink-body: color-mix(in oklab, var(--ink) 80%, transparent);
  --rule: color-mix(in oklab, var(--ink) 10%, transparent);
  --rule-strong: var(--ink);
  --accent: var(--cobalt-600);
  --accent-strong: var(--cobalt-700);
  --accent-wash: var(--cobalt-100);
  --accent-tint: var(--cobalt-50);

  /* ---------------------------------------------------------------------------
     TYPE
     Two families, no third. Serif carries prose; mono carries every label,
     figure caption, number and piece of UI chrome.
     ------------------------------------------------------------------------ */
  --font-serif: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --font-mono: "Departure Mono", ui-monospace, "SF Mono", Menlo, Consolas,
    monospace;

  /* Compressed, but not cramped. The reference sets body copy at 14 px; at the
     line lengths we actually use that reads as fine print, so the whole scale is
     shifted one step up and the mono steps land on 11 px and 13 px, which is
     where Departure Mono's pixel grid stays crisp. */
  --text-2xs: 0.6875rem; /* 11px — figure captions, meta rows */
  --text-xs: 0.8125rem; /* 13px — labels, buttons, footer */
  --text-sm: 1rem; /* 16px — body copy */
  --text-base: 1.125rem; /* 18px — section headings */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.5rem; /* 24px */
  --text-2xl: 1.875rem; /* 30px */
  --text-5xl: 3rem;

  --leading-body: 1.8; /* 180% — the site's signature setting */
  --leading-column: 1.6; /* 160% — tighter inside multi-column text */
  --leading-tight: 1.25;
  --leading-flush: 1;

  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-label: 0.1em; /* uppercase mono headings */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------------------------------------------------------------------------
     SPACE — 4px base, used as a multiplier
     ------------------------------------------------------------------------ */
  --space: 0.25rem;
  --space-1: calc(var(--space) * 1);
  --space-2: calc(var(--space) * 2);
  --space-3: calc(var(--space) * 3);
  --space-4: calc(var(--space) * 4);
  --space-6: calc(var(--space) * 6);
  --space-8: calc(var(--space) * 8);
  --space-10: calc(var(--space) * 10);
  --space-12: calc(var(--space) * 12);
  --space-16: calc(var(--space) * 16);
  --space-20: calc(var(--space) * 20);
  --space-24: calc(var(--space) * 24);
  --space-32: calc(var(--space) * 32); /* the editorial gap between sections */
  --space-64: calc(var(--space) * 64);

  --gutter: 6%; /* column gap, as on the source site */

  /* ---------------------------------------------------------------------------
     MEASURE
     ------------------------------------------------------------------------ */
  --measure: 36rem; /* max line length for prose */
  --width-page: 96rem;
  --width-content: 64rem;
  --width-prose: 32rem;

  /* ---------------------------------------------------------------------------
     RADII, BORDERS, SHADOW
     Near-square. The only "depth" is a 2px inset bevel on controls.
     ------------------------------------------------------------------------ */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;

  --border-hairline: 1px;

  --bevel:
    inset 1px 1px 0 2px rgb(255 255 255 / 0.75),
    inset -1px -1px 0 2px rgb(0 0 0 / 0.1);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

  /* ---------------------------------------------------------------------------
     MOTION
     Short, compositor-only, and always overridable by prefers-reduced-motion.
     ------------------------------------------------------------------------ */
  --duration-fast: 100ms;
  --duration: 150ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------------------------------------------------------------------------
     FOCUS
     ------------------------------------------------------------------------ */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--cobalt-500);
  --focus-ring-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}