/* Bytes & Coffee tokens. Generated by scripts/build_tokens.py from tokens.json; edit that, not this.
   Espresso (dark) is the primary theme. Light applies with data-theme="light",
   or when there is no data-theme and the viewer prefers light. */
:root {
  --page: #15120f;
  --page-a: #1d1915;
  --page-b: #181410;
  --page-c: #120f0c;
  --paper: #1f1a15;
  --panel: #231d18;
  --panel-sunk: #1a1612;
  --panel-sunk-glass: #1a1612ee;
  --cream: #29221c;
  --ink: #f1e8da;
  --text-body: #cdc2b1;
  --muted: #a3988a;
  --muted-soft: #9a8f82;
  --orange: #c2601f;
  --orange-fill: #b3551a;
  --orange-dark: #e8a47d;
  --accent-deep: #9a4418;
  --on-accent: #fffbf2;
  --on-ink: #1d1914;
  --line: #3a3129;
  --border: #3d342b;
  --border-soft: #2f2821;
  --border-card: #40362d;
  --border-strong: #6b5f52;
  --shadow-hard: #0c0a08;
  --shadow-soft: #0f0c0a;
  --shadow-diffuse: #00000059;
  --shadow-modal: #00000099;
  --signal-good: #7fb58a;
  --signal-bad: #e07a5f;
  --elev-chip: 0.04em 0.05em 0 #0f0c0a;
  --elev-button: 0.2rem 0.25rem 0 #0f0c0a;
  --elev-card: 0.7rem 0.8rem 0 #0c0a08;
  --elev-media: 0 40px 80px -30px rgba(0,0,0,0.9);
  --space-1: 0.6rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --radius-chip: 0.12em;
  --radius-sm: 0.3rem;
  --radius-md: 0.35rem;
  --radius-lg: 0.7rem;
  --radius-tile: 12px;
  --radius-card: 26px;
  --font-display: Fraunces, Georgia, serif;
  --font-sans: Manrope, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --page: #e8e0d3;
    --page-a: #eee7dc;
    --page-b: #e6ddce;
    --page-c: #dfd3c2;
    --paper: #f4efe4;
    --panel: #f8f4ec;
    --panel-sunk: #ede5d9;
    --panel-sunk-glass: #ede5d9ee;
    --cream: #fffbf2;
    --ink: #171511;
    --text-body: #514b43;
    --muted: #706b62;
    --muted-soft: #777066;
    --orange: #b85618;
    --orange-fill: #b85618;
    --orange-dark: #78341f;
    --accent-deep: #78341f;
    --on-accent: #fffbf2;
    --on-ink: #fffbf2;
    --line: #d7cec0;
    --border: #cfc4b4;
    --border-soft: #d9d0c4;
    --border-card: #d2c6b7;
    --border-strong: #a89e8f;
    --shadow-hard: #cdbfae;
    --shadow-soft: #d0c3b3;
    --shadow-diffuse: #5f49321c;
    --shadow-modal: #17151155;
    --signal-good: #3e6b4a;
    --signal-bad: #9f3c24;
    --elev-chip: 0.04em 0.05em 0 #d0c3b3;
    --elev-button: 0.2rem 0.25rem 0 #d0c3b3;
    --elev-card: 0.7rem 0.8rem 0 #cdbfae;
    --elev-media: 0 40px 80px -30px rgba(0,0,0,0.9);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --page: #e8e0d3;
  --page-a: #eee7dc;
  --page-b: #e6ddce;
  --page-c: #dfd3c2;
  --paper: #f4efe4;
  --panel: #f8f4ec;
  --panel-sunk: #ede5d9;
  --panel-sunk-glass: #ede5d9ee;
  --cream: #fffbf2;
  --ink: #171511;
  --text-body: #514b43;
  --muted: #706b62;
  --muted-soft: #777066;
  --orange: #b85618;
  --orange-fill: #b85618;
  --orange-dark: #78341f;
  --accent-deep: #78341f;
  --on-accent: #fffbf2;
  --on-ink: #fffbf2;
  --line: #d7cec0;
  --border: #cfc4b4;
  --border-soft: #d9d0c4;
  --border-card: #d2c6b7;
  --border-strong: #a89e8f;
  --shadow-hard: #cdbfae;
  --shadow-soft: #d0c3b3;
  --shadow-diffuse: #5f49321c;
  --shadow-modal: #17151155;
  --signal-good: #3e6b4a;
  --signal-bad: #9f3c24;
  --elev-chip: 0.04em 0.05em 0 #d0c3b3;
  --elev-button: 0.2rem 0.25rem 0 #d0c3b3;
  --elev-card: 0.7rem 0.8rem 0 #cdbfae;
  --elev-media: 0 40px 80px -30px rgba(0,0,0,0.9);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --page: #15120f;
  --page-a: #1d1915;
  --page-b: #181410;
  --page-c: #120f0c;
  --paper: #1f1a15;
  --panel: #231d18;
  --panel-sunk: #1a1612;
  --panel-sunk-glass: #1a1612ee;
  --cream: #29221c;
  --ink: #f1e8da;
  --text-body: #cdc2b1;
  --muted: #a3988a;
  --muted-soft: #9a8f82;
  --orange: #c2601f;
  --orange-fill: #b3551a;
  --orange-dark: #e8a47d;
  --accent-deep: #9a4418;
  --on-accent: #fffbf2;
  --on-ink: #1d1914;
  --line: #3a3129;
  --border: #3d342b;
  --border-soft: #2f2821;
  --border-card: #40362d;
  --border-strong: #6b5f52;
  --shadow-hard: #0c0a08;
  --shadow-soft: #0f0c0a;
  --shadow-diffuse: #00000059;
  --shadow-modal: #00000099;
  --signal-good: #7fb58a;
  --signal-bad: #e07a5f;
  --elev-chip: 0.04em 0.05em 0 #0f0c0a;
  --elev-button: 0.2rem 0.25rem 0 #0f0c0a;
  --elev-card: 0.7rem 0.8rem 0 #0c0a08;
  --elev-media: 0 40px 80px -30px rgba(0,0,0,0.9);
  color-scheme: dark;
}
.display-xl { font-family: var(--font-display); font-size: 80px; line-height: 0.95; font-weight: 800; letter-spacing: -0.035em; }
.display-lg { font-family: var(--font-display); font-size: 56px; line-height: 1.0; font-weight: 800; letter-spacing: -0.03em; }
.display-accent { font-family: var(--font-display); font-size: 56px; line-height: 1.0; font-weight: 800; letter-spacing: -0.02em; font-style: italic; font-variation-settings: "WONK" 0, "SOFT" 0; }
.title { font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.lead { font-family: var(--font-sans); font-size: 19.2px; line-height: 1.5; font-weight: 500; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 15.2px; line-height: 1.2; font-weight: 700; }
.kicker { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.code { font-family: var(--font-mono); font-size: 15px; line-height: 1.5; font-weight: 400; }
.caption { font-family: var(--font-mono); font-size: 12.8px; line-height: 1.4; font-weight: 400; }