/*
 * Design tokens: the only file a palette, type or spacing change should touch.
 * Layer order: tokens → base → components. Components read only the semantic
 * tokens (--color-*, --font-*, --space-*, ...), never the raw palette values.
 * Contrast (WCAG 2.2): ink and muted text pass AA (≥4.5:1) on paper, surface
 * and tint in both themes; accent text passes AA; on-accent on accent passes AA.
 */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-v1.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Palette: light (warm paper, green-black ink, viridian, copper) */
  --color-paper: #f6f2e9;
  --color-surface: #fbf8f2;
  --color-tint: #ebe9dd;
  --color-ink: #15201c;
  --color-muted: #4d5a54;
  --color-rule: #ddd6c7;
  --color-rule-strong: #a59c88;
  --color-accent: #1d5644;
  --color-accent-hover: #143f32;
  --color-on-accent: #f6f2e9;
  --color-signal: #9a4d1b;
  --color-focus: #1d5644;
  --color-selection: #d5e3da;

  /* Type */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-text: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.1875rem, 1.05rem + 0.55vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --text-headline: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
  --text-display: clamp(2.375rem, 1.35rem + 4.6vw, 5.25rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-display: 380;

  --leading-tight: 1.04;
  --leading-heading: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.55;
  --tracking-display: -0.022em;
  --tracking-label: 0.14em;

  /* Space: a 4px-based scale, plus fluid section rhythm */
  --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: 4rem;
  --space-gutter: clamp(1.25rem, 0.6rem + 3.2vw, 4rem);
  --space-section: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --space-hero: clamp(3rem, 1rem + 9vw, 9rem);
  --space-panel: clamp(2rem, 1rem + 4vw, 4.5rem);

  /* Shape and layout */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --rule-width: 1px;
  --measure: 34rem;
  --page-max: 76rem;

  /* Motion */
  --duration-enter: 700ms;
  --duration-hover: 160ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Palette: dark (deep green-black, parchment ink, sage, brass) */
    --color-paper: #101714;
    --color-surface: #16201c;
    --color-tint: #1a2722;
    --color-ink: #ede7da;
    --color-muted: #aab4ae;
    --color-rule: #26322d;
    --color-rule-strong: #4a5a53;
    --color-accent: #8fc9b1;
    --color-accent-hover: #b0dccb;
    --color-on-accent: #0f1714;
    --color-signal: #e0a06b;
    --color-focus: #8fc9b1;
    --color-selection: #29453a;
  }
}

@media print {
  :root {
    --color-paper: #ffffff;
    --color-surface: #ffffff;
    --color-tint: #ffffff;
    --color-ink: #000000;
    --color-muted: #333333;
    --color-accent: #000000;
    --color-on-accent: #ffffff;
    --color-rule: #bbbbbb;
    --color-rule-strong: #888888;
  }
}