/* Design tokens: every color, size, and radius the site uses lives here. */

:root {
  color-scheme: light;

  /* Typography */
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-xs: 0.6875rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --text-display: clamp(2.5rem, 1.4rem + 4.5vw, 4.75rem);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* Shape */
  --radius: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-pill: 999px;
  --hairline: 1px;

  /* Widths */
  --container-width: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --reading-width: 65ch;
  --header-height: 3.5rem;

  /* Light palette: warm cream and sage */
  --background: oklch(0.965 0.018 82);
  --foreground: oklch(0.22 0.025 75);
  --muted: oklch(0.92 0.02 82);
  --muted-foreground: oklch(0.47 0.025 76);
  --card: oklch(0.99 0.01 86 / 82%);
  --border: oklch(0.83 0.025 82);
  --primary: oklch(0.38 0.055 155);
  --primary-hover: oklch(0.32 0.055 155);
  --primary-foreground: oklch(0.98 0.01 86);
  --ring: oklch(0.55 0.055 155);
  --grid-line: oklch(0.84 0.025 82 / 20%);
  --header-bg: oklch(0.965 0.018 82 / 75%);

  /* Pastel card tones: background / border pairs */
  --tone-sage-bg: #e7efdf;
  --tone-sage-border: #c8d6bd;
  --tone-periwinkle-bg: #e7ebfa;
  --tone-periwinkle-border: #cbd2ed;
  --tone-peach-bg: #f9e6da;
  --tone-peach-border: #ead0bd;
  --tone-butter-bg: #f6efd6;
  --tone-butter-border: #e4d7ae;

  --shadow-sm: 0 1px 2px oklch(0.22 0.025 75 / 6%);
  --shadow-md: 0 8px 24px oklch(0.22 0.025 75 / 10%);
}

/* On small screens the nav wraps to a second header row. */
@media (max-width: 40rem) {
  :root {
    --header-height: 6.25rem;
  }
}

/* Dark palette: neutral near-black with a slightly cool hue */
:root[data-theme="dark"] {
  color-scheme: dark;

  --background: oklch(0.205 0.004 265);
  --foreground: oklch(0.955 0.003 265);
  --muted: oklch(0.285 0.004 265);
  --muted-foreground: oklch(0.71 0.004 265);
  --card: oklch(0.255 0.004 265 / 88%);
  --border: oklch(0.955 0.003 265 / 12%);
  --primary: oklch(0.76 0.09 155);
  --primary-hover: oklch(0.82 0.09 155);
  --primary-foreground: oklch(0.205 0.004 265);
  --ring: oklch(0.76 0.09 155);
  --grid-line: oklch(0.955 0.003 265 / 4%);
  --header-bg: oklch(0.205 0.004 265 / 75%);

  --tone-sage-bg: #203026;
  --tone-sage-border: #3e5345;
  --tone-periwinkle-bg: #22263a;
  --tone-periwinkle-border: #414963;
  --tone-peach-bg: #31241f;
  --tone-peach-border: #5b4439;
  --tone-butter-bg: #2e2a1c;
  --tone-butter-border: #57503a;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 30%);
  --shadow-md: 0 8px 24px oklch(0 0 0 / 40%);
}