:root, [data-theme="light"] { --paper: #fbf8f3; --surface: #ffffff; --union-blue: #012169; --union-red: #c8102e; --on-brand: #ffffff; --heading: #012169; --link: #c8102e; --ink: #14193a; --ink-muted: #4f5672; --sky-tint: #e6ecf8; --blush-tint: #fbe9ec; --honey: #f2b233; --on-honey: #14193a; --line: #d9d5cc; --border-control: #6b7391; --focus: #012169; --success: #00647a; --danger: #b00d28; }
[data-theme="dark"] { --paper: #0b1026; --surface: #151c3d; --union-blue: #4267d8; --union-red: #d41a37; --on-brand: #ffffff; --heading: #e3e9ff; --link: #ff8fa0; --ink: #f1f2f8; --ink-muted: #aab1cf; --sky-tint: #1c2755; --blush-tint: #3d1a27; --honey: #f2b233; --on-honey: #14193a; --line: #2b3360; --border-control: #7f8ab8; --focus: #ffffff; --success: #6fd3e6; --danger: #ff8fa0; }
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --radius-sm: 8px; --radius-md: 16px; --radius-pill: 999px; --control-height: 48px; --control-height-sm: 40px; --content-width: 1080px; --reading-width: 640px; --font-display: "Fraunces", Georgia, serif; --font-sans: "Figtree", system-ui, sans-serif; }
.display { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-display); font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; }
.h3 { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 700; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
@font-face { font-family: "Fraunces"; src: url("../fonts/Fraunces-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-latin-wght.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }