:root {
--paper: #F7F8F6;
--surface-raised: #FFFFFF;
--surface-sunk: #EDF0EE;
--ink: #1F2A30;
--ink-muted: #4A5A62;
--hairline: #D5DDE0;
--slate: #2E5266;
--slate-deep: #1E3A4A;
--slate-tint: #E3ECF1;
--on-slate: #FFFFFF;
--gold: #C98B2B;
--gold-mark: #B07820;
--gold-text: #8A5A12;
--gold-tint: #F6EAD4;
--on-gold: #1F2A30;
--tier-close: var(--slate);
--tier-stretch: #3F6B57;
--tier-wildcard: #7A4B6C;
--success: #2F6B4F;
--warning: #8A5A12;
--danger: #A63D32;
--focus: #B07820;
--shadow-pop: 0 8px 24px rgba(31,42,48,0.12);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 72px;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-pill: 999px;
--font-serif: Georgia, "Times New Roman", serif;
--font-sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
--paper: #12181C;
--surface-raised: #1B2328;
--surface-sunk: #0D1215;
--ink: #E8EDEF;
--ink-muted: #A8B5BB;
--hairline: #2E3A41;
--slate: #8FB6CB;
--slate-deep: #5E8CA5;
--slate-tint: #1E3240;
--on-slate: #0D1215;
--gold: #E0A84E;
--gold-mark: #E0A84E;
--gold-text: #E7B868;
--gold-tint: #3A2D17;
--on-gold: #1F2A30;
--tier-close: var(--slate);
--tier-stretch: #8CC3A8;
--tier-wildcard: #D3A2C4;
--success: #7CC6A0;
--warning: #E7B868;
--danger: #F0958A;
--focus: #E0A84E;
--shadow-pop: 0 8px 24px rgba(0,0,0,0.45);
color-scheme: dark; } }
:root[data-theme="dark"] {
--paper: #12181C;
--surface-raised: #1B2328;
--surface-sunk: #0D1215;
--ink: #E8EDEF;
--ink-muted: #A8B5BB;
--hairline: #2E3A41;
--slate: #8FB6CB;
--slate-deep: #5E8CA5;
--slate-tint: #1E3240;
--on-slate: #0D1215;
--gold: #E0A84E;
--gold-mark: #E0A84E;
--gold-text: #E7B868;
--gold-tint: #3A2D17;
--on-gold: #1F2A30;
--tier-close: var(--slate);
--tier-stretch: #8CC3A8;
--tier-wildcard: #D3A2C4;
--success: #7CC6A0;
--warning: #E7B868;
--danger: #F0958A;
--focus: #E0A84E;
--shadow-pop: 0 8px 24px rgba(0,0,0,0.45);
color-scheme: dark; }
.display { font-family: var(--font-sans); font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-sans); font-size: 30px; line-height: 1.2; font-weight: 700; }
.h2 { font-family: var(--font-sans); font-size: 22px; line-height: 1.25; font-weight: 700; }
.h3 { font-family: var(--font-sans); font-size: 18px; line-height: 1.3; font-weight: 700; }
.lead { font-family: var(--font-sans); font-size: 19px; line-height: 1.55; font-weight: 400; }
.reading { font-family: var(--font-sans); font-size: 17px; line-height: 1.6; font-weight: 400; }
.ui { font-family: var(--font-sans); font-size: 15px; line-height: 1.45; font-weight: 400; }
.ui-strong { font-family: var(--font-sans); font-size: 15px; line-height: 1.45; font-weight: 700; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: 0.08em; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; font-weight: 400; }
.figure { font-family: var(--font-sans); font-size: 28px; line-height: 1.1; font-weight: 700; }
.quote { font-family: var(--font-serif); font-size: 19px; line-height: 1.55; font-weight: 400; font-style: italic; }
.pullout { font-family: var(--font-serif); font-size: 28px; line-height: 1.3; font-weight: 400; font-style: italic; }