/* Grow design tokens: the only file where a raw colour, size or weight is written down.
   Everything in app.css refers to these by name, and stylelint (stylelint.config.js) fails any spacing, font-size or
   font-weight literal that appears there instead. To add a step to a scale, add it here and say why in the commit.

   Brand: the Sonder Hollow website palette (cream, parchment, spruce, moss, copper, gold, ink), Fraunces for display
   (page titles and rendered Markdown headings) and Inter for everything else. Both are npm packages served from this
   origin (see src/app.js).
   Space: 4/8/12/16/24/32/48 px as --space-1 to --space-7. Type: 7 sizes (11/12/14/16/20/24/32 px) as --text-2xs to
   --text-2xl. Weights: 400/500/600. Radii: 6 chips, 8 controls and rows, 12 cards, 16 overlays; pills only for badges.
   Themes: light first (spruce and cream), then dark twice (once for "follow the device", once for an explicit choice), because CSS has no
   way to share one block between a media query and an attribute selector; the dark one is classic black (neutral greys, no green or blue tint, the copper
   accent kept; Geof, 12 Oct 2026), and its status washes stay faintly tinted because colour carries the meaning there; scripts/check-contrast.js fails if the two
   copies differ. Every text pair was checked for WCAG AA contrast (4.5:1 for text, 3:1 for control borders and focus
   rings) in both themes, and scripts/check-contrast.js re-checks the pairs listed there on every run of npm run check. */

:root {
  color-scheme: light;
  /* Spacing, type and weight scales: theme-independent. */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;
  --text-2xs: .6875rem; --text-xs: .75rem; --text-sm: .875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem;
  --text-code: .85em; /* inline code is sized against the text around it, which is why it is the one relative size */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  /* Reading and form measures (max-width), so a page never invents its own. */
  --topbar-h: 3.5rem;
  --measure-form: 54rem; --measure-narrow: 40rem; --measure-prose: 48rem;
  /* Washes and shadows on the dark surfaces (sidebar, top bar on phones, call dock): the same in both themes. */
  --on-dark-wash: rgba(244,239,228,.1); --on-dark-line: rgba(244,239,228,.25);
  --copper-wash: rgba(208,138,108,.14); --copper-wash-strong: rgba(208,138,108,.24);
  --scrim: rgba(10,20,15,.5); --auth-bg: #14251e; --auth-glow: #27483a; --shadow-float: 0 8px 24px rgba(20,37,30,.35);
  /* The website's palette, named once; the rest are derived from it. */
  --cream: #f4efe4; --parchment: #ebe4d3; --spruce: #1e352b; --spruce-deep: #14251e; --moss: #75845c; --copper: #be6e4e; --copper-soft: #d08a6c; --gold: #c0a050;
  --bg: #f4efe4; --surface: #fbf8f1; --surface-2: #ebe4d3; --surface-3: #e0d7c1; --field: #ffffff; --overlay: #fbf8f1;
  --ink: #20241f; --ink-2: #3a4238; --ink-3: #586054; --line: #d8cfb9; --line-2: #e6dfcc; --line-strong: #7c8371;
  --accent: #8e4a2b; --accent-soft: #f0e1d3; --accent-ink: #ffffff; --btn: #1e352b; --btn-ink: #f4efe4;
  --sage-soft: #e3e8d6; --good: #35653a;
  --warn: #7f4a12; --warn-soft: #f4e4cb; --danger: #a23428; --danger-soft: #f5ddd7; --danger-ink: #ffffff; --info: #2d5646; --info-soft: #dde7dd;
  --panel: #14251e; --on-dark: #f4efe4; --on-dark-accent: #d08a6c;
  --sb-bg: #1e352b; --sb-bg-2: #2a4a3b; --sb-ink: #f4efe4; --sb-muted: #b9c4ae; --sb-hover: rgba(244,239,228,.09); --sb-active: rgba(244,239,228,.16); --sb-line: rgba(244,239,228,.12);
  --top-mobile: #1e352b; --top-mobile-2: #2a4a3b;
  --ramp-1: #1e352b; --ramp-2: #3e5a44; --ramp-3: #75845c; --ramp-4: #a3b185; --ramp-5: #cfd8b8;
  --p1-bg: #f0e1d3; --p1-ink: #7a3e22; --p2-bg: #e3e8d6; --p2-ink: #3e4a2c; --p3-bg: #f3e8c8; --p3-ink: #65500e; --p4-bg: #ebe4d3; --p4-ink: #55584f;
  --r-6: .375rem; --r-8: .5rem; --r-12: .75rem; --r-16: 1rem;
  --pad-y: .625rem; --card-pad: 1rem; --row-pad: .625rem; --control: 2.25rem;
  --shadow: 0 1px 2px rgba(20,37,30,.06);
  --shadow-lg: 0 12px 32px rgba(20,37,30,.18);
  --font: "Fraunces Variable", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0a0a; --surface: #141414; --surface-2: #1c1c1c; --surface-3: #262626; --field: #181818; --overlay: #1c1c1c;
    --ink: #ede7d8; --ink-2: #d2cdbd; --ink-3: #a8a49a; --line: #2e2e2e; --line-2: #222222; --line-strong: #767676;
    --accent: #d8967a; --accent-soft: #2e231c; --accent-ink: #0a0a0a; --btn: #d08a6c; --btn-ink: #0a0a0a;
    --sage-soft: #10241a; --good: #a3ce8f;
    --warn: #e3ab6e; --warn-soft: #2b2112; --danger: #ee9488; --danger-soft: #331814; --danger-ink: #2a0f0b; --info: #93c6b1; --info-soft: #13211c;
    --panel: #242424; --on-dark: #ede7d8; --on-dark-accent: #d08a6c;
    --sb-bg: #000000; --sb-bg-2: #0a0a0a; --sb-ink: #ede7d8; --sb-muted: #a8a49a; --sb-hover: rgba(237,231,216,.07); --sb-active: rgba(208,138,108,.18); --sb-line: rgba(237,231,216,.1);
    --top-mobile: #000000; --top-mobile-2: #0a0a0a;
    --ramp-1: #2a2a2a; --ramp-2: #3d3d3d; --ramp-3: #6b6b68; --ramp-4: #9a9a96; --ramp-5: #cfcfca;
    --p1-bg: #33241c; --p1-ink: #f0b79c; --p2-bg: #14261a; --p2-ink: #c3d8b2; --p3-bg: #2b2312; --p3-ink: #e8cb86; --p4-bg: #262626; --p4-ink: #b8b4aa;
    --scrim: rgba(0,0,0,.6); --auth-bg: #000000; --auth-glow: #2a2a2a; --shadow-float: 0 8px 24px rgba(0,0,0,.6);
    --shadow: none; --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0a0a; --surface: #141414; --surface-2: #1c1c1c; --surface-3: #262626; --field: #181818; --overlay: #1c1c1c;
  --ink: #ede7d8; --ink-2: #d2cdbd; --ink-3: #a8a49a; --line: #2e2e2e; --line-2: #222222; --line-strong: #767676;
  --accent: #d8967a; --accent-soft: #2e231c; --accent-ink: #0a0a0a; --btn: #d08a6c; --btn-ink: #0a0a0a;
  --sage-soft: #10241a; --good: #a3ce8f;
  --warn: #e3ab6e; --warn-soft: #2b2112; --danger: #ee9488; --danger-soft: #331814; --danger-ink: #2a0f0b; --info: #93c6b1; --info-soft: #13211c;
  --panel: #242424; --on-dark: #ede7d8; --on-dark-accent: #d08a6c;
  --sb-bg: #000000; --sb-bg-2: #0a0a0a; --sb-ink: #ede7d8; --sb-muted: #a8a49a; --sb-hover: rgba(237,231,216,.07); --sb-active: rgba(208,138,108,.18); --sb-line: rgba(237,231,216,.1);
  --top-mobile: #000000; --top-mobile-2: #0a0a0a;
  --ramp-1: #2a2a2a; --ramp-2: #3d3d3d; --ramp-3: #6b6b68; --ramp-4: #9a9a96; --ramp-5: #cfcfca;
  --p1-bg: #33241c; --p1-ink: #f0b79c; --p2-bg: #14261a; --p2-ink: #c3d8b2; --p3-bg: #2b2312; --p3-ink: #e8cb86; --p4-bg: #262626; --p4-ink: #b8b4aa;
  --scrim: rgba(0,0,0,.6); --auth-bg: #000000; --auth-glow: #2a2a2a; --shadow-float: 0 8px 24px rgba(0,0,0,.6);
  --shadow: none; --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}
@media (min-width: 768px) { html[data-density="compact"] { --pad-y: .375rem; --card-pad: .75rem; --row-pad: .375rem; --control: 2rem; } }