/* Design tokens (F21). Light is the default; dark follows the OS unless the user overrides via [data-theme]. */
:root {
  --ink: #14323a;
  --ink-soft: #3d5a61;
  --bone: #f4ebd9;
  --paper: #fbf8f2;
  --coral: #c4533a;
  --teal: #1f6f78;
  --line: #d9d2c3;
  --sys-bone: #efe6d2;
  --sys-muscle: #c2554b;
  --sys-organ: #d9a07a;
  --sys-nerve: #e8c547;
  --sys-artery: #c9302c;
  --sys-vein: #3e6fb0;
  --sys-ligament: #9fb8ad;
  --sys-skin: #e8c9b0;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-read: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --radius: 14px;
  --shadow: 0 6px 24px rgb(20 50 58 / 12%);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink: #e9f1ef;
    --ink-soft: #b4c5c2;
    --bone: #23201d;
    --paper: #0f1a1d;
    --coral: #f08a6f;
    --teal: #6cc1c8;
    --line: #2d3b3f;
    --shadow: 0 6px 24px rgb(0 0 0 / 45%);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --ink: #e9f1ef;
  --ink-soft: #b4c5c2;
  --bone: #23201d;
  --paper: #0f1a1d;
  --coral: #f08a6f;
  --teal: #6cc1c8;
  --line: #2d3b3f;
  --shadow: 0 6px 24px rgb(0 0 0 / 45%);
  color-scheme: dark;
}

/* Static pages and pre-rendered cards (F18). Tokens are prepended at build time. */
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--font-ui); }
a { color: var(--teal); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.site-header { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.site-brand { display: flex; gap: 8px; align-items: center; font: 600 20px Georgia, serif; color: var(--ink); text-decoration: none; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 14px; }
.page, .static-card { max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; font-family: var(--font-read); font-size: 18px; }
.page h1, .static-card h1 { font: 600 34px/1.15 var(--font-read); margin: 8px 0; }
.page h2, .static-card h2 { font: 700 13px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 24px 0 6px; }
.page table { border-collapse: collapse; width: 100%; font: 15px var(--font-ui); }
.page th, .page td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.static-card .one-liner { font-style: italic; font-size: 20px; }
.static-card .sub, .crumbs, .small { color: var(--ink-soft); font: 14px var(--font-ui); }
.static-card .fact { background: var(--bone); border-left: 4px solid var(--coral); border-radius: 10px; padding: 4px 14px; }
.site-footer { border-top: 1px solid var(--line); padding: 16px; font-size: 14px; color: var(--ink-soft); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
@media (max-width: 600px) { .page h1, .static-card h1 { font-size: 28px; } .page table { font-size: 13px; } }