/* RootsFree design tokens. Source of truth: design/DESIGN.md.
   One accent. Grades are data colors, never a second accent.
   Production self-hosts the two families (see DESIGN.md "Type"); see static/css/site.css @font-face. */

:root {
  /* ---- color: surfaces and ink ---- */
  --paper: #FBFAF7;          /* page */
  --paper-2: #F4F2ED;        /* sunken: image blocks, panel head, code */
  --paper-3: #FFFFFF;        /* raised: cards sit one step brighter than the page */
  --ink: #18191B;            /* text, 16.9:1 on paper */
  --ink-muted: #5A5D63;      /* secondary text, 6.5:1 on paper */
  --ink-faint: #6B6E74;      /* captions, kickers, footer heads: 4.9:1 on paper, 4.6:1 on paper-2 */
  --line: #E4E1D9;           /* hairlines, card borders */
  --line-strong: #C9C5BB;    /* inputs, hover borders, connectors */

  /* ---- color: the one accent (madder, the archivist's red pencil) ---- */
  --accent: #A3391D;         /* 6.4:1 against --accent-ink; the only saturated color on any page */
  --accent-ink: #FFFFFF;     /* text and icons placed on the accent */
  --accent-wash: color-mix(in srgb, var(--accent) 7%, var(--paper));   /* selected row, traced card */
  --accent-press: color-mix(in srgb, var(--accent) 84%, #000);         /* hover and active fill */

  /* ---- color: evidence grades (demoted data colors, always paired with a glyph) ---- */
  --grade-proven: #3D5A48;     /* muted moss, 7.4:1 */
  --grade-likely: #765F2A;     /* muted ochre, 5.9:1 */
  --grade-guess: #56607A;      /* slate, 6.2:1 */
  --grade-unsourced: #6B6E74;  /* grey, 4.9:1, dashed outline carries the meaning */
  --grade-wash: 10%;           /* chip background = color-mix(grade 10%, paper) */

  /* ---- type ---- */
  --font-display: "Newsreader", "Newsreader Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "Recursive", "Recursive Fallback", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Recursive", "Recursive Fallback", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --mono-on: "MONO" 1, "CASL" 0;   /* Recursive's mono axis; the same file serves text and numbers */
  --mono-off: "MONO" 0, "CASL" 0;

  --fs-display: clamp(2.5rem, 1.35rem + 4.4vw, 4.5rem);  /* 40 -> 72 px */
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3rem);            /* 32 -> 48 px */
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);      /* 24 -> 34 px */
  --fs-h3: 1.25rem;     /* 20 */
  --fs-lead: 1.25rem;   /* 20 */
  --fs-body: 1.0625rem; /* 17 */
  --fs-ui: 0.9375rem;   /* 15, app chrome */
  --fs-small: 0.875rem; /* 14 */
  --fs-micro: 0.75rem;  /* 12, chips and mono meta */

  --lh-display: 1.04;
  --lh-head: 1.15;
  --lh-body: 1.55;
  --lh-ui: 1.35;
  --track-display: -0.022em;
  --track-head: -0.012em;
  --track-chip: 0.06em;

  --wght-display: 500;
  --wght-text: 400;
  --wght-strong: 600;

  /* ---- space (4 px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(20px, 4vw, 48px);
  --measure: 66ch;
  --page-max: 1200px;
  --header-h: 64px;

  /* ---- radii ---- */
  --r-1: 3px;     /* chips */
  --r-2: 6px;     /* buttons, inputs, cards */
  --r-3: 10px;    /* panels, image blocks */

  /* ---- borders (no shadows anywhere) ---- */
  --bw: 1px;
  --border: var(--bw) solid var(--line);
  --border-strong: var(--bw) solid var(--line-strong);
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.45, 0, .2, 1);
  --dur-1: 120ms;   /* hover color */
  --dur-2: 180ms;   /* dim and light-up */
  --dur-3: 320ms;   /* one connector segment drawing */
  --dur-4: 480ms;   /* card deal-in on load */
  --stagger: 90ms;  /* per generation */

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111213;
    --paper-2: #18191B;
    --paper-3: #1C1D20;
    --ink: #ECE8E1;
    --ink-muted: #A6A39C;
    --ink-faint: #8A8883;
    --line: #2A2B2E;
    --line-strong: #3C3D41;
    /* --accent is NOT redeclared: the same madder fill carries white text at 6.4:1.
       Accent text on dark is never used; links are ink with an accent underline in both modes. */
    --accent-wash: color-mix(in srgb, var(--accent) 22%, var(--paper));
    --accent-press: color-mix(in srgb, var(--accent) 84%, #fff);
    --grade-proven: #8DB39B;
    --grade-likely: #C9AE6E;
    --grade-guess: #A3ACC6;
    --grade-unsourced: #8E9095;
    --grade-wash: 16%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --stagger: 0ms;
  }
}