/* GENERATED BY site/build.mjs — DO NOT EDIT.
 *
 * Every value here is read out of theme/tokens.ts, which CLAUDE.md §12 makes
 * the one owner of it. Change a value THERE and re-run `node site/build.mjs`.
 * Editing this file makes the site a second owner of the palette, which is the
 * exact drift the generator exists to prevent.
 *
 * Source: theme/tokens.ts · generated 2026-10-06
 */

@font-face {
  font-family: 'Newsreader_500Medium';
  src: url('fonts/Newsreader_500Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SourceSans3_400Regular';
  src: url('fonts/SourceSans3_400Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SourceSans3_600SemiBold';
  src: url('fonts/SourceSans3_600SemiBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---- the base theme ------------------------------------------------------ *
 * DARK, by the founder's call of 2026-10-06, and it is a knowing
 * departure from DESIGN.md §14's "buff background" — flagged rather than made
 * quietly (CLAUDE.md: do not contradict a spec silently).
 *
 * THE SPEC'S BUFF PREDATES THE INVERSION. §14 was written 2026-09-06. D52,
 * three days later, inverted the canonical design target to DARK, overturning
 * D18's canonical-target-is-LIGHT ruling. So §14's buff is not a ruling that
 * the site should be light; it is a sentence from the era when the whole
 * product was. The site now matches what someone actually sees on installing.
 *
 * THE RULING IS D52, NOT D53, and this comment said D53 until it was read back
 * against the register — theme/tokens.ts says "D53 inverts D18" in two places
 * and that is where the wrong number came from. D53's body never mentions the
 * canonical target; D52's HEADING states the inversion.
 *
 * UNCONDITIONAL, not a prefers-color-scheme switch. A visitor whose system
 * prefers light would otherwise never see the theme the product is designed
 * in, which is the whole point of the change. The other palette is kept one
 * attribute away — set data-theme="light" on the html element — so
 * reversing this is a one-word edit, not a rebuild.
 *
 * (No backticks in this comment on purpose: it lives inside a JS template
 * literal, and a backtick here ends the string.) */
:root {
  --color-ground: #0F0D0B;
  --color-surface: #1C1915;
  --color-raised: #26231D;
  --color-sunk: #060605;
  --color-ink: #ECEBEA;
  --color-ink-muted: #ABABAB;
  --color-ink-disabled: rgba(236, 235, 234, 0.38);
  --color-ink-tint: rgba(236, 235, 234, 0.14);
  --color-on-ink: #0E0D0C;
  --color-line: rgba(236, 235, 234, 0.14);
  --color-line-faint: rgba(236, 235, 234, 0.08);
  --color-line-strong: rgba(236, 235, 234, 0.38);
  --color-press: rgba(236, 235, 234, 0.1);
  --color-scrim: rgba(0, 0, 0, 0.60);
  --color-overlay-chip: rgba(0, 0, 0, 0.50);
  --color-overlay-band: rgba(0, 0, 0, 0.30);
  --color-on-overlay: #ECEBEA;
  --color-overlay-viewer: #0B0B0B;
  --color-overlay-title: rgba(0, 0, 0, 0.70);
  --color-on-overlay-muted: rgba(236, 235, 234, 0.50);
  --color-primary: #E0BF84;
  --color-on-primary: #0E0D0C;
  --color-primary-press: #CCAC71;
  --color-primary-tint: rgba(224, 191, 132, 0.16);
  --color-hazard: #EE5552;
  --color-hazard-tint: rgba(238, 85, 82, 0.16);
  --color-on-hazard: #0E0D0C;
  --color-caution: #FF8D3E;
  --color-caution-tint: rgba(255, 141, 62, 0.16);
  --color-water: #68A6DA;
  --color-water-tint: rgba(104, 166, 218, 0.16);
  --color-person-moss: #A5CA9C;
  --color-person-moss-tint: rgba(165, 202, 156, 0.16);
  --color-person-lake: #82CDCD;
  --color-person-lake-tint: rgba(130, 205, 205, 0.16);
  --color-person-heather: #C9B2E5;
  --color-person-heather-tint: rgba(201, 178, 229, 0.16);
  --color-person-rose: #E6AAC0;
  --color-person-rose-tint: rgba(230, 170, 192, 0.16);
  --color-disabled-bg: rgba(236, 235, 234, 0.1);
  --color-focus: #E0BF84;
  --color-skeleton: rgba(236, 235, 234, 0.1);
  --color-inverse: #F3EAD3;
  --color-on-inverse: #191817;
  --color-inverse-primary: #573D02;

  --space-none: 0px;
  --space-tight: 4px;
  --space-snug: 8px;
  --space-row: 12px;
  --space-gap: 16px;
  --space-card-pad: 16px;
  --space-screen-margin: 16px;
  --space-section: 32px;
  --space-band: 48px;
  --space-page: 64px;

  --radius-mark: 6px;
  --radius-control: 12px;
  --radius-container: 16px;
  --radius-sheet: 24px;
  --radius-pill: 999px;

  --type-display-family: 'Newsreader_500Medium', Georgia, serif;
  --type-display-size: 40px;
  --type-display-line: 44px;
  --type-display-tracking: -0.5px;
  --type-heading-family: 'Newsreader_500Medium', Georgia, serif;
  --type-heading-size: 28px;
  --type-heading-line: 34px;
  --type-heading-tracking: -0.2px;
  --type-title-family: 'SourceSans3_600SemiBold', system-ui, sans-serif;
  --type-title-size: 20px;
  --type-title-line: 26px;
  --type-body-family: 'SourceSans3_400Regular', system-ui, sans-serif;
  --type-body-size: 17px;
  --type-body-line: 24px;
  --type-body-strong-family: 'SourceSans3_600SemiBold', system-ui, sans-serif;
  --type-body-strong-size: 17px;
  --type-body-strong-line: 24px;
  --type-notice-family: 'SourceSans3_400Regular', system-ui, sans-serif;
  --type-notice-size: 14px;
  --type-notice-line: 20px;
  --type-notice-strong-family: 'SourceSans3_600SemiBold', system-ui, sans-serif;
  --type-notice-strong-size: 14px;
  --type-notice-strong-line: 20px;
  --type-label-family: 'SourceSans3_600SemiBold', system-ui, sans-serif;
  --type-label-size: 15px;
  --type-label-line: 20px;
  --type-overline-family: 'SourceSans3_600SemiBold', system-ui, sans-serif;
  --type-overline-size: 13px;
  --type-overline-line: 18px;
  --type-overline-tracking: 1.04px;
  --type-caption-family: 'SourceSans3_400Regular', system-ui, sans-serif;
  --type-caption-size: 13px;
  --type-caption-line: 18px;
  --type-caption-strong-family: 'SourceSans3_600SemiBold', system-ui, sans-serif;
  --type-caption-strong-size: 13px;
  --type-caption-strong-line: 18px;
  --type-data-lg-family: 'SourceSans3_600SemiBold', system-ui, sans-serif;
  --type-data-lg-size: 36px;
  --type-data-lg-line: 40px;
  --type-data-lg-tracking: -0.45px;
  --type-data-md-family: 'SourceSans3_600SemiBold', system-ui, sans-serif;
  --type-data-md-size: 24px;
  --type-data-md-line: 30px;
}

/* The other palette, available by attribute only. */
:root[data-theme='light'] {
  --color-ground: #F3EAD3;
  --color-surface: #F6F0DF;
  --color-raised: #F9F5EB;
  --color-sunk: #E8E6E3;
  --color-ink: #191817;
  --color-ink-muted: #4D4D4D;
  --color-ink-disabled: rgba(25, 24, 23, 0.38);
  --color-ink-tint: rgba(25, 24, 23, 0.14);
  --color-on-ink: #F3F1EF;
  --color-line: rgba(25, 24, 23, 0.14);
  --color-line-faint: rgba(25, 24, 23, 0.08);
  --color-line-strong: rgba(25, 24, 23, 0.48);
  --color-press: rgba(25, 24, 23, 0.08);
  --color-scrim: rgba(0, 0, 0, 0.40);
  --color-overlay-chip: rgba(0, 0, 0, 0.50);
  --color-overlay-band: rgba(0, 0, 0, 0.30);
  --color-on-overlay: #ECEBEA;
  --color-overlay-viewer: #0B0B0B;
  --color-overlay-title: rgba(0, 0, 0, 0.70);
  --color-on-overlay-muted: rgba(236, 235, 234, 0.50);
  --color-primary: #573D02;
  --color-on-primary: #FFFFFF;
  --color-primary-press: #432F01;
  --color-primary-tint: rgba(87, 61, 2, 0.12);
  --color-hazard: #A92227;
  --color-hazard-tint: rgba(169, 34, 39, 0.12);
  --color-on-hazard: #FFFFFF;
  --color-caution: #A65106;
  --color-caution-tint: rgba(166, 81, 6, 0.12);
  --color-water: #005486;
  --color-water-tint: rgba(0, 84, 134, 0.12);
  --color-person-moss: #36572F;
  --color-person-moss-tint: rgba(54, 87, 47, 0.12);
  --color-person-lake: #00595A;
  --color-person-lake-tint: rgba(0, 89, 90, 0.12);
  --color-person-heather: #57426E;
  --color-person-heather-tint: rgba(87, 66, 110, 0.12);
  --color-person-rose: #6D3B4F;
  --color-person-rose-tint: rgba(109, 59, 79, 0.12);
  --color-disabled-bg: rgba(25, 24, 23, 0.1);
  --color-focus: #573D02;
  --color-skeleton: rgba(25, 24, 23, 0.08);
  --color-inverse: #0F0D0B;
  --color-on-inverse: #ECEBEA;
  --color-inverse-primary: #E0BF84;
}

/* ---- the type scale, one class per role --------------------------------- */

.t-display {
  font-family: var(--type-display-family);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  letter-spacing: var(--type-display-tracking);
}

.t-heading {
  font-family: var(--type-heading-family);
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line);
  letter-spacing: var(--type-heading-tracking);
}

.t-title {
  font-family: var(--type-title-family);
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
}

.t-body {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.t-body-strong {
  font-family: var(--type-body-strong-family);
  font-size: var(--type-body-strong-size);
  line-height: var(--type-body-strong-line);
}

.t-notice {
  font-family: var(--type-notice-family);
  font-size: var(--type-notice-size);
  line-height: var(--type-notice-line);
}

.t-notice-strong {
  font-family: var(--type-notice-strong-family);
  font-size: var(--type-notice-strong-size);
  line-height: var(--type-notice-strong-line);
}

.t-label {
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
}

.t-overline {
  font-family: var(--type-overline-family);
  font-size: var(--type-overline-size);
  line-height: var(--type-overline-line);
  letter-spacing: var(--type-overline-tracking);
  text-transform: uppercase;
}

.t-caption {
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
}

.t-caption-strong {
  font-family: var(--type-caption-strong-family);
  font-size: var(--type-caption-strong-size);
  line-height: var(--type-caption-strong-line);
}

.t-data-lg {
  font-family: var(--type-data-lg-family);
  font-size: var(--type-data-lg-size);
  line-height: var(--type-data-lg-line);
  letter-spacing: var(--type-data-lg-tracking);
}

.t-data-md {
  font-family: var(--type-data-md-family);
  font-size: var(--type-data-md-size);
  line-height: var(--type-data-md-line);
}