:root, [data-theme="dark"] { --bg: #0B0E1A; --bg-raised: #101527; --surface: #131A2E; --surface-head: #182038; --surface-inset: #0E1324; --line-subtle: #1E2640; --line: #2A3150; --line-strong: #3B4668; --line-control: #5A6690; --ink: #E9E6DE; --ink-2: #A3A9BD; --ink-3: #8088A1; --gold: #F0A43C; --gold-hover: #FFB95A; --on-gold: #1E1406; --gold-ink: #F0A43C; --gold-soft: #F0A43C1A; --gold-line: #F0A43C66; --moon: #8FB4E8; --moon-ink: #8FB4E8; --moon-soft: #8FB4E81A; --moon-line: #8FB4E85C; --ok: #74C98C; --ok-soft: #74C98C1A; --crit: #F08A7E; --crit-soft: #F08A7E1A; --logo-ink: #FFFFFF; --logo-accent: var(--gold); --scrim: #05070D; --on-photo: #E9E6DE; --on-photo-2: #E9E6DEB8; --gantt-plan: var(--line-strong); --gantt-fact: var(--moon); --gantt-late: var(--gold-ink); --gantt-date: var(--ink-3); --gantt-now: var(--logo-accent); --background: var(--bg); --foreground: var(--ink); --card: var(--surface); --card-foreground: var(--ink); --popover: var(--surface); --popover-foreground: var(--ink); --primary: var(--gold); --primary-foreground: var(--on-gold); --secondary: var(--surface-head); --secondary-foreground: var(--ink); --muted: var(--surface-inset); --muted-foreground: var(--ink-2); --accent: var(--surface-head); --accent-foreground: var(--ink); --destructive: var(--crit); --border: var(--line); --input: var(--line-control); --ring: var(--gold-ink); --shadow-frame: 0 30px 80px -30px #000000b3; --shadow-pop: 0 8px 24px -8px #000000cc; --focus-ring: 0 0 0 2px #0B0E1A, 0 0 0 4px #F0A43C; }
[data-theme="light"] { --bg: #F4F5F8; --bg-raised: #ECEEF3; --surface: #FFFFFF; --surface-head: #EFF1F6; --surface-inset: #F7F8FA; --line-subtle: #E6E9EF; --line: #D6DBE5; --line-strong: #B9C1D2; --line-control: #7C859B; --ink: #121729; --ink-2: #454D66; --ink-3: #5C6480; --gold: #F0A43C; --gold-hover: #E0922A; --on-gold: #1E1406; --gold-ink: #965900; --gold-soft: #F0A43C24; --gold-line: #D0892A; --moon: #4F7FC4; --moon-ink: #2D5C9B; --moon-soft: #4F7FC41F; --moon-line: #4F7FC466; --ok: #2A7244; --ok-soft: #2A72441A; --crit: #B3402F; --crit-soft: #B3402F1A; --logo-ink: #121729; --logo-accent: var(--gold); --scrim: #05070D; --on-photo: #E9E6DE; --on-photo-2: #E9E6DEB8; --gantt-plan: var(--line); --gantt-fact: var(--moon-ink); --gantt-late: var(--gold-ink); --gantt-date: var(--ink-3); --gantt-now: var(--logo-accent); --background: var(--bg); --foreground: var(--ink); --card: var(--surface); --card-foreground: var(--ink); --popover: var(--surface); --popover-foreground: var(--ink); --primary: var(--gold); --primary-foreground: var(--on-gold); --secondary: var(--surface-head); --secondary-foreground: var(--ink); --muted: var(--surface-inset); --muted-foreground: var(--ink-2); --accent: var(--surface-head); --accent-foreground: var(--ink); --destructive: var(--crit); --border: var(--line); --input: var(--line-control); --ring: var(--gold-ink); --shadow-frame: 0 24px 60px -28px #1217294d; --shadow-pop: 0 8px 24px -10px #12172940; --focus-ring: 0 0 0 2px #F4F5F8, 0 0 0 4px #965900; }
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-32: 128px; --radius-sm: 4px; --radius-md: 10px; --radius-full: 9999px; --border-hair: 1px; --border-bold: 2px; --container: 1200px; --container-wide: 1320px; --grid-columns: 12; --gutter: 24px; --page-margin: 40px; --section-y: 128px; --control-h: 36px; --control-h-sm: 32px; --panel-pad: 16px; --measure: 65ch; --bp-sm: 640px; --bp-md: 1024px; --bp-lg: 1280px; --font-display: Unbounded, Manrope, system-ui, sans-serif; --font-sans: Manrope, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; }
.display-xl { font-family: var(--font-display); font-size: 64px; line-height: 68px; font-weight: 700; letter-spacing: -0.02em; }
.display-l { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; }
.display-m { font-family: var(--font-display); font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -0.015em; }
.display-s { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; }
.heading-l { font-family: var(--font-sans); font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.heading-m { font-family: var(--font-sans); font-size: 18px; line-height: 26px; font-weight: 700; }
.heading-s { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 700; }
.lead { font-family: var(--font-sans); font-size: 20px; line-height: 32px; font-weight: 400; }
.body-l { font-family: var(--font-sans); font-size: 18px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-s { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.ui { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.ui-s { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600; }
.p-title { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.p-h { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 700; }
.p-body { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.p-strong { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.p-meta { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; }
.data-xl { font-family: var(--font-mono); font-size: 40px; line-height: 44px; font-weight: 400; letter-spacing: -0.03em; }
.data-l { font-family: var(--font-mono); font-size: 28px; line-height: 32px; font-weight: 400; letter-spacing: -0.02em; }
.data { font-family: var(--font-mono); font-size: 15px; line-height: 22px; font-weight: 400; }
.data-s { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 400; }