/* Design tokens — light is the primary theme; dark is architected via [data-theme="dark"] on (no toggle shipped, switching supported). */ :root { /* ground & surfaces */ --color-ground: #F2F0E9; --color-surface: #FCFBF7; --color-surface-alt: #E8E5DA; /* text */ --color-text: #161713; --color-text-muted: #62645C; --color-border: #C9C7BC; /* brand */ --color-olive: #626B32; --color-olive-dark: #3F4720; --color-orange: #F04B16; --color-orange-dark: #C9360C; /* semantic */ --color-success: #687338; --color-danger: #C94224; --color-warning: #D79724; /* board (clipboard frame stays dark in both themes) */ --color-board: #26281F; --color-board-rail: #31342A; --color-board-text: #D8D6C8; /* type */ --font-display: "Archivo Narrow", "Arial Narrow", sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* layout */ --container-width: 1360px; --pad-inline: clamp(20px, 4vw, 64px); --pad-section: clamp(88px, 9vw, 150px); --radius-small: 4px; --radius-medium: 8px; --radius-large: 14px; /* subtle grid texture, applied point-wise (hero board, ledger, cards) */ --texture-grid: linear-gradient(rgba(22, 23, 19, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 23, 19, 0.02) 1px, transparent 1px); } :root[data-theme="dark"] { --color-ground: #171914; --color-surface: #20231C; --color-surface-alt: #2A2E24; --color-text: #F3F0E7; --color-text-muted: #AFB1A6; --color-border: #44493C; --color-olive: #A6AE65; --color-olive-dark: #C4CB86; --color-orange: #FF6535; --color-orange-dark: #FF7E55; --color-success: #A5B467; --color-danger: #EE765A; --color-warning: #E8B558; --color-board: #101209; --color-board-rail: #1B1E12; --color-board-text: #C9C7B4; --texture-grid: linear-gradient(rgba(243, 240, 231, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 240, 231, 0.02) 1px, transparent 1px); }