/* 𓁹𓁹: shared design tokens. The site has one theme, dark.
 *
 * Every value the site draws with, and the only place any of them is written.
 * Typography families are the exception: they live in `fonts.css`. */

:root {
  color-scheme: dark;

  /* ── type ───────────────────────────────────────────────
     The two font families live in `fonts.css`, the one file to change to
     change the site's typography. Sizes and rhythm stay here. */

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-input: 1rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-display: clamp(2rem, 9vw, 3.25rem);

  --lh-tight: 1.1;
  --lh-snug: 1.5;
  --lh-body: 1.6;

  --track-tight: -0.02em;
  --track-wide: 0.06em;

  /* ── space · 4pt ────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── colour · achromatic ────────────────────────────── */
  --color-paper:   oklch(13% 0 0);
  --color-paper-2: oklch(17.5% 0 0);
  --color-ink:     oklch(93% 0 0);
  --color-dim:     oklch(68% 0 0);
  --color-rule:    oklch(26% 0 0);
  --color-focus:   oklch(93% 0 0);
  --color-alert:   oklch(72% 0.17 27);
  --color-sel:     oklch(93% 0 0);
  --color-sel-ink: oklch(13% 0 0);
  /* QR codes stay black on white, whatever the page's colours, so they scan. */
  --color-qr-paper: oklch(100% 0 0);
  --color-qr-ink:   oklch(0% 0 0);

  /* ── line & corner ──────────────────────────────────── */
  --rule: 1px;
  --radius: 0;               /* square. everywhere. on purpose. */

  /* ── motion ─────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 90ms;
  --dur-2: 140ms;

  /* ── measure ────────────────────────────────────────── */
  --measure: 46rem;
  --control-size: 2.75rem;
}