/* SteadiLev Design System — tokens.css Two-layer system: primitives (raw values) → semantic (intent). Components consume only semantic tokens. Palette rev 2026-06-08: Onyx + Soft Linen + Dusty Taupe + Stormy/Deep Teal. Reconciled 2026-08-12 against the live steadilev.ai, which had moved ahead of this file. Every colour primitive was already byte-identical; what came back was a third border weight (hairline), a separate action colour for interactive affordances, two layout primitives, and the ruling that the mono tier is LOWERCASE. Ruled canon by Lloyd, 12 Aug 2026. */ :root { /* === Primitives === onyx: warm dark ramp. 900 = Onyx base; 800-300 interpolated between Onyx and Linen so warm-grey tones stay tonally consistent. linen: cream / warm light surface. taupe: weighted warm surface (hero panels, callouts). teal: cool authority accent pair (Stormy 600 primary, Deep 500 muted). moss/rust/ochre: signal trio kept in the warm-mineral family. */ --onyx-900: #0F0F0F; /* Onyx · text on light · dark-mode bg */ --onyx-800: #1A1A1A; /* elevated panel on dark */ --onyx-700: #252523; /* surface on dark */ --onyx-650: #2C2C2A; /* hairline · rules and dividers on dark (added 2026-08-12) */ --onyx-600: #3D3B3A; /* border on dark · secondary text on dark */ --onyx-500: #827F7A; /* mid neutral · dim text · disabled */ --onyx-400: #C7C2BA; /* muted text on light · borders on light */ --onyx-300: #E9E3DA; /* secondary light surface · subtle hover bg */ --linen-50: #F5EFE5; /* Soft Linen · primary light surface · text on dark */ --taupe-500: #A17C6B; /* Dusty Taupe · warm tonal-break surface */ --teal-600: #00798C; /* Stormy Teal · primary accent */ --teal-500: #5B7B7A; /* Deep Teal · hover / secondary / decorative */ --moss-500: #5B8C5A; /* success */ --rust-500: #A14E3A; /* danger */ --ochre-500: #C49457; /* warn */ /* === Semantic tokens (default = dark theme) === */ --color-bg: var(--onyx-900); --color-bg-elevated: var(--onyx-800); --color-surface: var(--onyx-700); --color-surface-warm: var(--taupe-500); /* Three border weights, not two. Dark surfaces need the distinction: subtle = the quietest fill edge, hairline = rules and dividers between things, border = the edge of an object you are meant to read as an object. Using subtle for a panel edge makes it ~1.3:1 on Onyx and it disappears on a projector. */ --color-border: var(--onyx-600); --color-hairline: var(--onyx-650); --color-border-subtle: var(--onyx-700); --color-text: var(--linen-50); --color-text-muted: var(--onyx-400); --color-text-dim: var(--onyx-500); --color-accent: var(--teal-600); --color-accent-muted: var(--teal-500); --color-trust: var(--teal-500); /* legacy alias · prefer --color-accent-muted in new code */ --color-success: var(--moss-500); --color-danger: var(--rust-500); --color-warn: var(--ochre-500); /* === Action colour === Interactive affordances — primary buttons, focus rings — are Soft Linen, not Stormy Teal. 16.8:1 against Onyx, the loudest object available, and it leaves Teal as the single identity colour rather than making it compete with itself. Teal fill gives a 4.46:1 label, just under the 4.5 floor for normal text, which is why it lost the button. To try an alternate, change these three lines only: Stormy Teal --color-action: var(--teal-600); --color-action-lift: #0A8DA2; --color-action-ink: var(--linen-50); Ochre --color-action: var(--ochre-500); --color-action-lift: #D2A868; --color-action-ink: #17130C; */ --color-action: var(--linen-50); --color-action-lift: #FFFFFF; --color-action-ink: var(--onyx-900); /* === Tint scale === */ --tint-soft: 12%; --tint-line: 33%; --tint-glow: 8%; /* === Type families === Body: Inter for operational readability across long-form, dense data, and UI. Display: Geist at weight 900 (Heavy) for hero punch and section titles. Within the display tier, hierarchy comes from SIZE. Between display and body, hierarchy comes from family + weight (Geist 900 vs Inter 400). No serif. Mono: IBM Plex Mono for labels, badges, code. */ --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* === Spacing scale === */ --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-24: 96px; --space-32: 128px; /* === Radius scale === */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* === Slide / page padding === */ --slide-pad-x: clamp(40px, 5vw, 96px); --slide-pad-y: clamp(60px, 6vh, 88px); --gutter: clamp(20px, 2.2vw, 36px); /* === Web page primitives === --pad-x is the page gutter for scrolling web surfaces (slides use --slide-pad-x, which starts wider and does not need to reach phone width). --rule is the one-line way to draw a separator so nobody hand-picks a border colour again. */ --pad-x: clamp(22px, 5vw, 88px); --rule: 1px solid var(--color-hairline); /* === Responsive breakpoints (informational; use in @media queries) === */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; } /* === Light theme override === */ html[data-theme-light] { --color-bg: var(--linen-50); --color-bg-elevated: #FFFFFF; --color-surface: var(--onyx-300); --color-border: var(--onyx-400); --color-hairline: var(--onyx-300); --color-border-subtle: var(--onyx-300); --color-text: var(--onyx-900); --color-text-muted: var(--onyx-600); --color-text-dim: var(--onyx-500); --color-action: var(--onyx-900); --color-action-lift: #000000; --color-action-ink: var(--linen-50); /* The three-weight border system collapses to two on light: there is no ramp slot between onyx-300 and onyx-400, so hairline and subtle share a value here. The distinction only earns its keep on dark surfaces. surface-warm + accent + accent-muted + signals are theme-invariant. */ }