/* ========================================================================== DESIGN TOKENS Edit these CSS variables to retheme the whole site. Also exposed via Tweaks panel (bottom-right when tweaks are on). ========================================================================== */ :root { /* ---- Color: neutral page, dashboards sit on white ---- */ --bg: #ffffff; /* surfaces on which dashboard/cards sit */ --bg-fade: #F4F1EE; /* cream tint for section bands */ --surface: #F9F8F8; /* cards, tinted sections */ --surface-2: #F1F2F3; /* neutral tinted surface */ --ink: #1A1615; /* primary text */ --ink-2: #453F3D; /* secondary text */ --muted: #757170; /* tertiary text */ --line: rgba(26,22,21,0.08); --line-2: rgba(26,22,21,0.16); /* Accent — buttons use black on default theme (matches reference) */ --accent: #000000; --accent-ink:#ffffff; --accent-tint: color-mix(in oklab, var(--accent) 12%, var(--bg)); /* ---- Type ----------------------------------------------------------- */ --font-display: "Open Runde", "Open Runde Placeholder", system-ui, sans-serif; --font-body: "Open Runde", "Open Runde Placeholder", system-ui, sans-serif; --font-mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- Scale ---------------------------------------------------------- */ --radius-sm: 10px; --radius: 16px; --radius-lg: 28px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(19,18,15,0.04), 0 1px 0 rgba(19,18,15,0.03); --shadow: 0 24px 48px -24px rgba(19,18,15,0.18), 0 2px 6px rgba(19,18,15,0.04); --shadow-lg: 0 60px 120px -40px rgba(19,18,15,0.35), 0 8px 24px rgba(19,18,15,0.08); /* ---- Layout --------------------------------------------------------- */ --container: 1200px; --gutter: clamp(20px, 4vw, 64px); --section-y: clamp(80px, 10vw, 160px); /* ---- Motion --------------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-emph: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 200ms; --dur: 400ms; --dur-slow: 800ms; } /* Color variants applied via data-theme on ------------------------ */ html[data-theme="cobalt"] { --bg: #ffffff; --bg-fade: #F4F1EE; --accent: #000000; --accent-ink: #ffffff; } html[data-theme="navy-amber"] { --bg: #FAF8F4; --surface: #F1EEE7; --ink: #0F1524; --ink-2: #2A3042; --accent: #E79A2B; --accent-ink: #1a1205; } html[data-theme="retail-green"] { --bg: #F9FAF6; --surface: #EEF1E7; --ink: #11170F; --ink-2: #2B3226; --accent: #2F7D4C; --accent-ink: #ffffff; } html[data-theme="mono-ink"] { --bg: #F6F5F1; --surface: #ECEAE2; --ink: #0A0A08; --accent: #0A0A08; --accent-ink: #F6F5F1; } html[data-density="compact"] { --section-y: clamp(56px, 7vw, 112px); --gutter: clamp(16px, 3vw, 48px); } html[data-density="airy"] { --section-y: clamp(112px, 14vw, 220px); } html[data-font="runde-inter"] { --font-display: "Open Runde", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; } html[data-font="serif-sans"] { --font-display: "Instrument Serif", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; } html[data-font="mono-accent"] { --font-display: "Fragment Mono", ui-monospace, monospace; --font-body: "Open Runde", system-ui, sans-serif; }