/* Hearth design tokens. Task TAS-9189, chosen 14 Oct 2026.
 *
 * The one design system for Andrew's own apps and sites (Koshiams Kitchen,
 * the Commentaries essays). Not Wotion, which keeps Notion's look, and not
 * Simple Digital Methods, which has its own identity.
 *
 * Everything a component needs is a token here. A project customises Hearth
 * by overriding tokens in its own stylesheet, after this one, and never by
 * editing components.css. tokens.json is the same values for tools that do
 * not read CSS; keep the two in step.
 *
 * Three switches, set as attributes on <html>:
 *   data-set     "doing" (default): apps, kitchen-sized controls
 *                "reading": long-form pages, a reading typeface, longer lines
 *   data-mode    "light" or "dark". Doing defaults to dark, reading to light;
 *                the page sets the attribute, so the choice is explicit.
 *   data-accent  "chili" (the default), "saffron" or "basil"
 *
 * Contrast, measured 14 Oct 2026 (WCAG 2.2): text 4.5:1 or more everywhere,
 * body text 14.5:1 light and 15.1:1 dark; control outlines (--edge) 3:1 or
 * more. A changed colour is measured again before it ships.
 */
@import url("fonts/fonts.css");

:root {
  /* type */
  --f-head: "Young Serif", Georgia, "Times New Roman", serif;
  --f-ui: "Figtree", "Segoe UI", system-ui, sans-serif;
  --f-read: "Literata", Georgia, serif;
  /* The names of things (a recipe in a list, at the top of its own page):
     Literata at 600, tighter than Young Serif, so a long name reads at a
     glance. Chris's feedback, adopted 15 Oct 2026. */
  --f-name: var(--f-read); --w-name: 600;
  --f-mono: "Martian Mono", "SFMono-Regular", Menlo, monospace;
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 18px; --t-xl: 22px;
  --t-2xl: 28px; --t-3xl: clamp(30px, 5vw, 44px); --t-4xl: clamp(36px, 6.5vw, 60px);

  /* space: a 4px base, applied through gap */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* shape and depth */
  --r-sm: 8px; --r: 16px; --r-pill: 999px;
  --depth: 0 1px 2px rgba(20, 16, 12, .16), 0 14px 30px -16px rgba(20, 16, 12, .38);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1); --dur: 180ms;

  /* the doing setting, the default */
  --tap: 52px; --body-font: var(--f-ui); --body-size: var(--t-lg); --body-lh: 1.5; --measure: 60ch;

  /* colour: light */
  --paper: #f2f0ec; --surface: #ffffff; --raised: #f7f5f1;
  --ink: #221e1a; --muted: #6c635a; --line: #dfd9d1; --edge: #8a8075;
  /* accent: chili */
  --accent: #b8321c; --on-accent: #ffffff; --accent-soft: rgba(184, 50, 28, .09);
  color-scheme: light;
}

/* the reading setting */
[data-set="reading"] { --tap: 44px; --body-font: var(--f-read); --body-size: 19px; --body-lh: 1.72; --measure: 66ch; }

/* colour: dark */
[data-mode="dark"] {
  --paper: #1a1816; --surface: #25221f; --raised: #2e2a26;
  --ink: #f3ece2; --muted: #b6ab9c; --line: #3a3530; --edge: #7d746a;
  --accent: #ef6a4f; --on-accent: #1a1816; --accent-soft: rgba(239, 106, 79, .16);
  --depth: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 16px 30px -18px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* the other accents. A project may also set --accent, --on-accent and
   --accent-soft to its own colour, measured to 4.5:1 against paper and
   surface in both modes. */
[data-accent="saffron"]                    { --accent: #9a5a00; --on-accent: #ffffff; --accent-soft: rgba(154, 90, 0, .10); }
[data-accent="saffron"][data-mode="dark"]  { --accent: #eda63a; --on-accent: #1a1816; --accent-soft: rgba(237, 166, 58, .16); }
[data-accent="basil"]                      { --accent: #356b26; --on-accent: #ffffff; --accent-soft: rgba(53, 107, 38, .10); }
[data-accent="basil"][data-mode="dark"]    { --accent: #8cc27a; --on-accent: #1a1816; --accent-soft: rgba(140, 194, 122, .16); }

@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }