/*
  Shared design tokens for wyattbrocato.site and its sister hosts.
  Single source: design/tokens.css. `npm run sync:design` copies it, the Inter
  font and the favicon set into every package; a test asserts the copies match.
  Legacy names at the bottom (--canvas, --paper, ...) keep older rules working.
*/
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Color: one lead (deep green), one highlight (lime), tinted neutrals. */
  --color-ink: #101610;          /* body text on paper, 18.2:1 */
  --color-ink-soft: #354035;     /* lede and secondary copy, 10.7:1 */
  --color-muted: #536052;        /* captions and fine print on paper, 6.6:1 */
  --color-paper: #fffef9;        /* page ground */
  --color-canvas: #f2fde6;       /* pale green ground and theme color */
  --color-tint: #eef9e0;         /* quiet panels */
  --color-line: #d8e6cd;         /* hairlines and borders */
  --color-line-strong: #76896d;  /* input borders, 3.7:1 against paper */
  --color-brand: #073e31;        /* lead: buttons, dark bands, 11.9:1 with paper */
  --color-brand-2: #0f5944;      /* hover and links on paper, 8.2:1 */
  --color-accent: #c8f6a5;       /* highlight: marks, chips, buttons on brand */
  --color-accent-ink: #073e31;   /* text on accent, 9.9:1 */
  --color-on-brand: #fffef9;
  --color-on-brand-soft: #c4ddce; /* secondary text on brand, 8.4:1 */
  --color-focus: #3f7a2f;        /* focus ring, 5.2:1 on paper */
  --color-error: #702f20;        /* 9.8:1 on paper */
  --color-error-bg: #f9e7df;

  /* Type: serif is Wyatt's voice (letters, issue previews, pull quotes);
     heavy sans is the tool's voice (quizzes, results, labels, buttons). */
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-label: 0.75rem;     /* caps labels: 12px minimum, tracked */
  --text-small: 0.875rem;    /* anything read to act: 14px minimum */
  --text-body: 1rem;
  --text-lede: clamp(1.125rem, 1.02rem + 0.5vw, 1.3125rem);
  --text-section: 1.25rem;
  --text-title: clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem);
  --text-display: clamp(2.6rem, 1.4rem + 5vw, 5.5rem);
  --lh-body: 1.55;
  --lh-heading: 1.08;
  --tracking-display: -0.025em;
  --tracking-label: 0.08em;
  --measure: 62ch;

  /* Space: 4, 8, 12, 16, 24, 32, 48, 64, 96 px. */
  --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-9: 6rem;
  --gutter: 1rem;
  --max: 1180px;

  /* Shape and depth: pills for buttons and chips, 12px inputs, 20-28px frames. */
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --shadow: 0 20px 56px rgba(20, 66, 43, 0.11);
  --shadow-soft: 0 8px 28px rgba(20, 66, 43, 0.08);

  /* Motion vocabulary: 120 press and hover, 200 small state change, 300 panel
     or question change, one 450 moment per page. Transform and opacity only.
     Exits run about two thirds of the entrance. Drop movement under
     prefers-reduced-motion and keep opacity, color and focus feedback. */
  --dur-press: 120ms;
  --dur-state: 200ms;
  --dur-panel: 300ms;
  --dur-moment: 450ms;
  --stagger: 30ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.2, 1);

  /* Legacy names, kept so existing pages and other branches keep working. */
  --canvas: var(--color-canvas);
  --paper: var(--color-paper);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --green: var(--color-brand);
  --green-2: var(--color-brand-2);
  --line: var(--color-line);
  --lime: var(--color-accent);
  --rose: #f3d8cd;
  --dur-fast: var(--dur-press);
  --dur-base: var(--dur-state);
  --dur-slow: var(--dur-moment);
}