/* Stoa design tokens: THE source of truth for color, type, spacing, radius and motion across app, onboarding, auth and ops. Render-blocking in every (via _theme.html; ops links it direct, pinned dark). Tier 1 primitives hold the ONLY raw colors - a rebrand swaps that ramp plus core/palette.py; Tier 2 semantic aliases are what stylesheets read (C3). DARK is the default and the no-JS/no-cookie fallback; light = [data-theme="light"] (theme.js) + a prefers-color-scheme query scoped to :root:not([data-theme]) so it cannot fight JS. Both light blocks stay duplicated for no-JS; tests/test_design_tokens.py pins them declaration-identical. */ /* Geist (OFL, self-hosted at static/fonts/ with its license): brand face everywhere; self-hosting satisfies the ops CSP (font-src 'self'). Variable weight 100-900. */ @font-face { font-family: 'Geist'; src: url('/static/fonts/geist-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('/static/fonts/geist-mono-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { color-scheme: dark; /* ---- Tier 1: primitives (a rebrand edits ONLY this tier) ---------------- 12-step dark ramp, darkest surface to brightest text; each step names its canonical use. The ---- markers delimit the tier for test_tokens_css_literals_confined_to_tier1. */ --gray-1: #181818; /* app bg (brand ramp, Paper & Ink 2026-07) */ --gray-2: #1d1d1d; /* sticky table header bg */ --gray-3: #202020; /* faint row divider */ --gray-4: #232323; /* card / surface (Ink) */ /* ZERO-HEADROOM PAIR (STO-1062 ruling): --field-border on --bg-card-hover (this shade) measures 3.0014:1 dark / 3.0806:1 light. Lightening gray-5 silently pushes every field edge in a hovered row below the 3:1 non-text floor; re-measure BOTH themes before moving it one step. */ --gray-5: #2b2b2a; /* card hover */ --gray-6: #323231; /* subtle border */ --gray-7: #3b3b3a; /* border */ --gray-8: #535352; /* strong/emphasis border */ --gray-9: #757371; /* form-field edge (STO-418; 3.33:1 on card) */ --gray-10: #9c9b99; /* muted text (5.66:1 on card) */ --gray-11: #b4b3b1; /* secondary text */ --gray-12: #ebeaea; /* primary text (Paper-toned) */ --black-cool: #181818; /* the warm brand retires the cool-black auth variant */ --white: #ffffff; --green-9: #34d399; /* status green: onboarding steps + live presence dots (founder 2026-07-28) */ --red-9: #f57272; /* sell / destructive / negative (4.52:1 on the worst lifted ground, 5.64 on card) */ --amber-9: #eab308; /* pending / caution */ --sand: #ded6ca; /* brand highlight: quiet emphasis fields/buttons */ --sand-rgb: 222, 214, 202; /* channel of --sand, for rgba() tints of the accent */ --clay: #aba297; /* brand highlight: mid earth tone */ --wood: #464036; /* brand highlight: deep earth tone */ /* Channel triplets for rgba(var(--x-rgb), a) tints. In light the red chip channel stays the brighter 217,45,32, not #b42318 (border tint vs text); in dark they coincide. */ --black-rgb: 0, 0, 0; --white-rgb: 255, 255, 255; --gray-12-rgb: 235, 234, 234; /* channel of --gray-12 (Paper-tinted lighten) */ --gray-1-rgb: 24, 24, 24; /* channel of --gray-1 (translucent shells) */ --green-9-rgb: 52, 211, 153; --red-9-rgb: 245, 114, 114; --amber-9-rgb: 234, 179, 8; /* ---- Tier 2: semantic tokens (the names every stylesheet reads) ---------- */ --bg: var(--gray-1); --bg-card: var(--gray-4); --bg-card-hover: var(--gray-5); --border: var(--gray-6); --border-light: var(--gray-7); --text-primary: var(--gray-12); --text-secondary: var(--gray-11); --text-muted: var(--gray-10); --green: var(--text-primary); /* STO-277: green is not a brand color -> neutral off-white */ /* BUY channel mirrors --red-rgb so buy/sell tint alike (STO-453, STO-277 neutral green). */ --green-rgb: var(--gray-12-rgb); --red: var(--red-9); --red-rgb: var(--red-9-rgb); --on-red: var(--gray-1); /* on --red: 5.26:1 dark, 6.4:1 light, AA at badge size */ --status-green: var(--green-9); /* completed/verified accents (onboarding wizard) */ --status-green-rgb: var(--green-9-rgb); --amber: var(--amber-9); --amber-rgb: var(--amber-9-rgb); /* Primary button: light chip on dark, inverted in light mode so it is never invisible. */ --btn-primary-bg: var(--gray-12); --btn-primary-text: var(--gray-1); /* Channel for rgba(var(--shade-rgb), a) overlays: lightens on dark, darkens on light. */ --shade-rgb: var(--gray-12-rgb); --shadow: rgba(var(--black-rgb), 0.5); /* Auth screens use a slightly cooler black behind a faint top glow. */ --auth-bg: var(--black-cool); /* Structural surfaces that must flip but are not a plain fg/bg pair. */ --nav-bg: rgba(var(--gray-1-rgb), 0.9); /* translucent fixed nav over blurred content (warm; pure black retired) */ --bg-th: var(--gray-2); --divider: var(--gray-3); --border-strong: var(--gray-8); --field-border: var(--gray-9); --scrim: rgba(var(--black-rgb), 0.5); /* modal/popup overlay */ /* New roles (C3: defined; applied from C4). */ --accent: var(--sand); /* the brand's quiet emphasis (Paper & Ink) */ --accent-fg: var(--gray-1); --ring: color-mix(in srgb, var(--text-primary) 55%, transparent); /* focus ring */ --danger-bg: color-mix(in srgb, var(--red) 12%, transparent); /* error fills */ --warn-bg: color-mix(in srgb, var(--amber) 12%, transparent); /* caution fills */ /* Motion + elevation primitives (C3: defined; applied from C4). */ --shadow-1: 0 1px 2px rgba(var(--black-rgb), 0.5); --shadow-2: 0 4px 12px rgba(var(--black-rgb), 0.45); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-1: 150ms; /* matches the installed transition base (0.15s throughout) */ --dur-2: 200ms; } :root[data-theme="light"] { color-scheme: light; /* Tier 1, light ramp (same step semantics as dark). */ --gray-1: #e3e1df; --gray-2: #dedcd9; --gray-3: #dbd9d6; --gray-4: #ebeaea; --gray-5: #dedcd9; --gray-6: #cccac8; --gray-7: #b4b3b1; --gray-8: #9c9b99; --gray-9: #7d7b79; --gray-10: #615f5d; --gray-11: #535352; --gray-12: #232323; --black-cool: #e3e1df; /* auth bg follows the light app bg (Paper) */ --green-9: #056b4f; /* status green, light (5.0:1 on Paper) */ --red-9: #b42318; --amber-9: #7d5200; /* Paper grounds: 4.81:1 on the demo banner tint (STO-836) */ --ink-rgb: 35, 35, 35; /* the light theme's darkening channel */ --gray-1-rgb: 227, 225, 223; /* channel of --gray-1 (translucent shells) */ --green-9-rgb: 5, 107, 79; --red-9-rgb: 217, 45, 32; --amber-9-rgb: 125, 82, 0; --sand: #ded6ca; --clay: #aba297; --wood: #464036; /* Tier 2 overrides that do not follow the ramp mapping. */ --green-rgb: var(--ink-rgb); --btn-primary-bg: var(--gray-12); --btn-primary-text: var(--gray-1); /* Paper text on the Ink chip; no harsh white */ --accent-fg: var(--gray-12); /* Ink on sand in light (Paper-on-sand would vanish) */ --shade-rgb: var(--ink-rgb); --shadow: rgba(var(--ink-rgb), 0.10); --nav-bg: rgba(var(--gray-1-rgb), 0.85); --scrim: rgba(var(--ink-rgb), 0.45); --shadow-1: 0 1px 2px rgba(var(--ink-rgb), 0.10); --shadow-2: 0 4px 12px rgba(var(--ink-rgb), 0.12); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; /* Tier 1, light ramp - duplicates the [data-theme="light"] block above; notes are there. */ --gray-1: #e3e1df; --gray-2: #dedcd9; --gray-3: #dbd9d6; --gray-4: #ebeaea; --gray-5: #dedcd9; --gray-6: #cccac8; --gray-7: #b4b3b1; --gray-8: #9c9b99; --gray-9: #7d7b79; --gray-10: #615f5d; --gray-11: #535352; --gray-12: #232323; --black-cool: #e3e1df; --green-9: #056b4f; --red-9: #b42318; --amber-9: #7d5200; --ink-rgb: 35, 35, 35; --gray-1-rgb: 227, 225, 223; --green-9-rgb: 5, 107, 79; --red-9-rgb: 217, 45, 32; --amber-9-rgb: 125, 82, 0; --sand: #ded6ca; --clay: #aba297; --wood: #464036; /* Tier 2 overrides that do not follow the ramp mapping. */ --green-rgb: var(--ink-rgb); --btn-primary-bg: var(--gray-12); --btn-primary-text: var(--gray-1); --accent-fg: var(--gray-12); --shade-rgb: var(--ink-rgb); --shadow: rgba(var(--ink-rgb), 0.10); --nav-bg: rgba(var(--gray-1-rgb), 0.85); --scrim: rgba(var(--ink-rgb), 0.45); --shadow-1: 0 1px 2px rgba(var(--ink-rgb), 0.10); --shadow-2: 0 4px 12px rgba(var(--ink-rgb), 0.12); } } :root { /* Font, type-scale, radius and spacing tokens (colors are the three blocks above). */ --font: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale (STO-91): 0.75rem/12px is the FLOOR for visible text, body is 1rem. test_typography_baseline.py enforces it; keep inline font-sizes >= var(--fs-min). */ --fs-min: 0.75rem; /* 12px - dense/secondary text floor */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 1rem; /* 16px body */ --fs-md: 0.875rem; /* 14px - buttons, emphasized body */ --fs-lg: 1.25rem; /* 20px - section titles / h2 */ --fs-xl: 1.5rem; /* 24px - page titles / h1 (kills the 1.15-1.6rem drift, C4) */ /* Radius scale (STO-375): three steps + full (pill/circle stay literal 999px/50%), replacing the 2-16px sprawl. Nest concentrically: inner = outer minus padding. */ --r-full: 999px; /* pill / dot */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; /* Spacing scale (STO-375): 4px grid for padding/margin/gap. Still off-grid on purpose: 0.3/0.4rem and position offsets (optical alignment); auth/legal keep their own. */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 0.75rem; /* 12px */ --space-lg: 1rem; /* 16px */ --space-xl: 1.5rem; /* 24px */ }