/* Shared design tokens — one system, several homepage layouts.
   Source of truth per .notes/style-guide.md. Edit here, not per-page. */
:root {
  --hue: 355;
  --ink: oklch(19% 0.03 var(--hue));
  --ink-soft: oklch(42% 0.045 var(--hue));
  --paper: oklch(96.5% 0.018 var(--hue));
  --paper-dim: oklch(92% 0.032 var(--hue));
  --blush: oklch(88% 0.055 var(--hue));
  --accent: oklch(52% 0.235 var(--hue));
  --accent-hot: oklch(60% 0.255 var(--hue));
  --accent-ink: oklch(98% 0.012 var(--hue));
  --band: oklch(28% 0.085 var(--hue));
  --band-ink: oklch(94% 0.02 var(--hue));

  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  --font-display: "Melodrama", ui-serif, Georgia, serif;
  --font-body: "Supreme", ui-sans-serif, system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.9375rem;
  --text-base: 1.125rem;
  --text-lg: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-heading: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --text-display: clamp(2.5rem, 1.1rem + 7vw, 7.5rem);

  --wide: 84rem;
  --gutter: clamp(var(--space-md), 5vw, var(--space-3xl));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}