/* tokens.css — Sven Erdbrügge · erdbruegge.de
 * Hallmark · genre: editorial · macrostructure: Long Document
 * theme: custom dark steel · Fraunces + IBM Plex Sans
 */

:root {
  /* ── Colour ── */
  --color-paper:     oklch(11% 0.010 235);
  --color-paper-2:   oklch(15% 0.012 235);
  --color-paper-3:   oklch(20% 0.011 235);
  --color-rule:      oklch(27% 0.009 235);
  --color-muted:     oklch(52% 0.007 235);
  --color-ink-2:     oklch(75% 0.006 235);
  --color-ink:       oklch(93% 0.005 235);
  --color-accent:    oklch(63% 0.130 235);
  --color-accent-hi: oklch(72% 0.110 235);
  --color-focus:     oklch(70% 0.180 235);
  --color-green:     oklch(65% 0.170 145);
  --color-green-dim: oklch(65% 0.170 145 / 0.25);
  --color-nav-bg:    oklch(11% 0.010 235 / 0.93);

  /* ── Typography ── */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  /* ── Type scale (major third · 1.25) ── */
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.25rem;
  --text-lg:      1.5625rem;
  --text-xl:      1.953rem;
  --text-2xl:     2.441rem;
  --text-display: clamp(2.75rem, 5vw + 1rem, 4.75rem);

  /* ── Spacing (4-pt) ── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-short:   200ms;
  --dur-mid:     380ms;

  /* ── Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 100px;

  /* ── Z-scale ── */
  --z-base:  1;
  --z-nav:   100;
  --z-toast: 200;
  --z-modal: 300;
}

/* Light theme overrides */
.light-theme {
  --color-paper:     oklch(97% 0.005 235);
  --color-paper-2:   oklch(100% 0 0);
  --color-paper-3:   oklch(93% 0.008 235);
  --color-rule:      oklch(82% 0.008 235);
  --color-muted:     oklch(46% 0.008 235);
  --color-ink-2:     oklch(28% 0.010 235);
  --color-ink:       oklch(14% 0.012 235);
  --color-accent:    oklch(48% 0.160 235);
  --color-accent-hi: oklch(38% 0.160 235);
  --color-focus:     oklch(48% 0.200 235);
  --color-nav-bg:    oklch(97% 0.005 235 / 0.93);
}