/* =====================================================================
   Paper and Ink · tokens.css
   The single source of truth for color, type and texture.
   Load order on every page: fonts.css, tokens.css, base.css, site.css,
   paper.css, then home.css (home page) or css/essays/<slug>.css (essays).

   Color rule: gold always marks Concept A, blue always marks Concept B.
   Everything else is ink, graphite and paper. The blue and gold come
   from the author's alma mater.
   ===================================================================== */

:root {
  /* page */
  --paper: #f6f7f9;
  --ink: #15191f;
  --muted: #5d6673;
  --rule: #dde1e7;
  --surface: #ffffff;

  /* concepts */
  --life: #2774ae;        /* Concept B, blue */
  --life-soft: #2774ae1f;
  --once: #b88a00;        /* Concept A, gold */
  --once-soft: #ffd10033;
  --need: #8a93a0;        /* neutral reference series */

  /* paper objects keep their own inks, even in dark mode */
  --slip: #fbfaf5;
  --slip-ink: #2c2b28;
  --slip-once: #946d00;
  --slip-life: #1e5a8c;
  --sheet: #fbfcf8;
  --grid-minor: #3b7bb01a;
  --grid-major: #3b7bb038;
  --graphite: #6b6f75;
  --tape: #efe6c9b8;

  /* depth and grain */
  --shadow: #0000000f;
  --shadow-deep: #00000040;
  --grain: 0.32;

  /* type: Newsreader for display, body and handwriting (italic);
     Hanken Grotesk for UI and labels; IBM Plex Mono for receipts and data */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* procedural textures: no image files, ever */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Dark mode follows the system unless a page pins data-theme. Paper
   objects stay paper-colored, slightly dimmed, with their dark inks. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101318; --ink: #e8ebef; --muted: #9aa3ae; --rule: #262c35; --surface: #161a20;
    --life: #6fb1e6; --life-soft: #6fb1e626; --once: #f2c94c; --once-soft: #f2c94c26; --need: #7d8693;
    --slip: #e4e1d8; --sheet: #e3e6df; --tape: #d9cfb0b0; --grain: 0.5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #101318; --ink: #e8ebef; --muted: #9aa3ae; --rule: #262c35; --surface: #161a20;
  --life: #6fb1e6; --life-soft: #6fb1e626; --once: #f2c94c; --once-soft: #f2c94c26; --need: #7d8693;
  --slip: #e4e1d8; --sheet: #e3e6df; --tape: #d9cfb0b0; --grain: 0.5;
  color-scheme: dark;
}