/* Design tokens. Single source of truth for color, type, spacing, motion.
   See SPEC.md §8 for the rationale behind these values. */

:root {
  /* Color: cool stone / charcoal / forest accent. Light mode only. */
  --bg: #F4F4F1;
  --ink: #1F1F1F;
  --muted: #5F5F5F;          /* darker than spec to clear WCAG AA on --bg */
  --rule: #D6D6D2;
  --accent: #1F4D3A;
  --accent-bg: #E7EFEA;
  --accent-ink: #143427;     /* hover/active for links */

  /* Typography */
  --font-display: "EB Garamond", "Iowan Old Style", "Apple Garamond",
    Garamond, "Times New Roman", serif;
  --font-body: "Source Serif 4", "Source Serif Pro", "Iowan Old Style",
    Charter, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (modular, ratio ~1.25 / major-third). Mobile-first; scales up
     at the .container breakpoint via clamp where appropriate. */
  --fs-50: 0.8125rem;        /* 13px - micro */
  --fs-75: 0.875rem;         /* 14px - meta */
  --fs-100: 1rem;            /* 16px - base */
  --fs-125: 1.125rem;        /* 18px */
  --fs-150: 1.25rem;         /* 20px */
  --fs-200: 1.5rem;          /* 24px */
  --fs-300: 1.875rem;        /* 30px */
  --fs-400: 2.25rem;         /* 36px */
  --fs-500: 2.875rem;        /* 46px */
  --fs-600: 3.75rem;         /* 60px - display */

  /* Display sizes use clamp() for fluid scaling phone -> desktop. The
     max for --fs-display is intentionally restrained (was 60px); long
     titles like "Helping Without Hurting in Church Benevolence: A Practical
     Guide to Walking with Low-Income People" stop becoming a wall. */
  --fs-display: clamp(2.25rem, 2.5vw + 1.25rem, 3rem);
  --fs-h1: clamp(1.875rem, 2vw + 1rem, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.5vw + 1rem, 2.125rem);
  --fs-h3: clamp(1.25rem, 0.75vw + 1rem, 1.5rem);

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-prose: 1.6;
  --lh-loose: 1.75;

  /* Letter spacing */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;          /* small caps / metadata */

  /* Spacing scale */
  --space-1: 0.25rem;         /* 4px */
  --space-2: 0.5rem;          /* 8px */
  --space-3: 0.75rem;         /* 12px */
  --space-4: 1rem;            /* 16px */
  --space-5: 1.5rem;          /* 24px */
  --space-6: 2rem;            /* 32px */
  --space-7: 3rem;            /* 48px */
  --space-8: 4rem;            /* 64px */
  --space-9: 6rem;            /* 96px */

  /* Layout */
  --measure-prose: 68ch;      /* max width for body prose */
  --measure-wide: 1200px;     /* max width for the library grid */
  --header-height: 4rem;

  /* Motion */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;

  /* Borders */
  --hairline: 1px solid var(--rule);
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Focus */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Reduced motion: collapse all transitions */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}