/* Cancer Policy Lab — design tokens.
   Change colors, type and spacing here; site.css only reads these. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Color (contrast vs #FFFFFF in comments) */
  --color-bg: #FFFFFF;
  --color-band: #F7F6F2;        /* alternate section background */
  --color-text: #121212;        /* 18.7:1 */
  --color-text-muted: #4A4A48;  /* 8.9:1 */
  --color-rule: #E3E2DD;
  --color-accent: #0B5D57;      /* 7.7:1 — links, one chart highlight */
  --color-chart-muted: #C9C8C2;
  --color-focus: #0B5D57;

  /* Type families */
  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Helvetica Neue", Arial, sans-serif;

  /* Type scale — mobile first; desktop values below */
  --text-hero: 2.5rem;      /* 40px */
  --text-h2: 1.875rem;      /* 30px */
  --text-h3: 1.3125rem;     /* 21px */
  --text-lead: 1.25rem;     /* 20px */
  --text-body: 1.125rem;    /* 18px */
  --text-small: 1rem;       /* 16px — floor, nothing smaller */

  --leading-tight: 1.1;
  --leading-heading: 1.2;
  --leading-lead: 1.45;
  --leading-body: 1.6;

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

  /* Layout */
  --page-max: 80rem;        /* 1280px */
  --gutter: 1.25rem;        /* 20px side margin on phones */
  --measure: 34em;          /* ~68 characters of body text */
  --section-gap: var(--space-7);
}

@media (min-width: 48rem) {     /* 768px */
  :root {
    --text-hero: 3.25rem;
    --text-h2: 2.25rem;
    --text-lead: 1.375rem;
    --text-body: 1.1875rem;
    --gutter: 2.5rem;
    --section-gap: var(--space-8);
  }
}

@media (min-width: 64rem) {     /* 1024px */
  :root {
    --text-hero: 4rem;        /* 64px */
    --text-h2: 2.5rem;        /* 40px */
    --text-h3: 1.5rem;        /* 24px */
    --text-lead: 1.5rem;      /* 24px */
    --text-body: 1.25rem;     /* 20px */
    --gutter: 3rem;
    --section-gap: var(--space-9);
  }
}