/* Public design tokens: components consume semantic roles, never color/type primitives. * Usage and theme rules: ./token-guide.md (ADRs CORE-006 and CORE-012). * Loaded through dashboard.css / @core/dashboardStyles. */ :root { /* ---- Surface stack ---- */ --surface-page: var(--color-ink-925); --surface-deep: var(--color-ink-950); --surface-base: var(--color-ink-850); --surface-raised: var(--color-ink-800); --surface-input: var(--color-ink-900); /* ---- Text ---- */ --text-primary: var(--color-ink-100); --text-secondary: var(--color-ink-300); --text-muted: var(--color-ink-400); --text-faint: var(--color-ink-500); --text-on-accent: var(--color-ink-50); /* ---- Accent ---- */ --accent: var(--color-blue-500); --accent-hover: var(--color-blue-400); --accent-soft: var(--color-blue-alpha-08); --accent-soft-hover: var(--color-blue-alpha-12); --accent-rail: var(--color-blue-alpha-20); --accent-deep: var(--color-blue-600); /* Filled primary CTAs use --button-primary-*; links and ghost controls use --accent. * The deeper button background distinguishes a filled action from accent text. */ --button-primary-bg: var(--color-blue-600); --button-primary-bg-hover: var(--color-blue-500); --button-primary-border: var(--color-blue-600); --button-primary-text: var(--text-on-accent); /* ---- Status (separate surfaces, NOT accent variants) ---- */ --success: var(--color-green-400); --success-soft: var(--color-green-alpha-08); --success-soft-hover: var(--color-green-alpha-15); --danger: var(--color-red-400); --danger-soft: var(--color-red-alpha-06); --danger-soft-hover: var(--color-red-alpha-12); --warning: var(--color-amber-400); --warning-soft: var(--color-amber-alpha-08); --warning-soft-hover: var(--color-amber-alpha-15); --info: var(--color-violet-400); /* Completes the ramp: success/danger/warning each carry a soft wash and --info did not, so an informational surface had no tinted background to reach for and reached for the accent instead (added 2026-08-23). */ --info-soft: var(--color-violet-alpha-08); /* ---- Borders ---- */ --border: var(--color-ink-700); --border-subtle: var(--color-ink-800); /* ---- Row tokens (re-mapped by .dash-dense) ---- */ --row-pad-y: var(--space-2); --row-pad-x: var(--space-3); --row-gap: var(--space-2); /* ---- Type roles (font shorthand: weight size/leading) ---- */ --text-caption: var(--text-weight-medium) var(--text-size-12) / var(--text-leading-tight) system-ui, sans-serif; --text-body: var(--text-weight-regular) var(--text-size-14) / var(--text-leading-normal) system-ui, sans-serif; --text-lead: var(--text-weight-regular) var(--text-size-16) / var(--text-leading-relaxed) system-ui, sans-serif; --text-h3: var(--text-weight-semi) var(--text-size-18) / var(--text-leading-snug) system-ui, sans-serif; --text-h2: var(--text-weight-semi) var(--text-size-22) / var(--text-leading-snug) system-ui, sans-serif; --text-h1: var(--text-weight-bold) var(--text-size-28) / var(--text-leading-tight) system-ui, sans-serif; /* ---- Radius ---- */ --radius-sm: var(--radius-1); --radius-md: var(--radius-2); --radius-lg: var(--radius-3); --radius-xl: var(--radius-4); --radius-pill: var(--radius-5); /* ---- Elevation ---- */ --shadow-rest: var(--elevation-1); --shadow-raised: var(--elevation-2); --shadow-overlay: var(--elevation-3); /* ---- Motion ---- */ --motion-quick: var(--duration-quick); --motion-slow: var(--duration-slow); --ease-out: var(--easing-out); --ease-in-out: var(--easing-in-out); /* ---- Overlay tints (read labels/badges against arbitrary backgrounds) ---- */ --overlay-tint: var(--color-black-alpha-50); --overlay-backdrop: var(--color-black-alpha-50); /* ---- Font families ---- */ --font-sans: var(--font-family-sans); --font-mono: var(--font-family-mono); /* ---- Public surface (ADR core/012, storm.css unit) ---- * Marketing identity roles. See the grammar block; light values are * deferred to the light-authoring unit and inherit dark until then. */ --brand-electric: var(--color-cyan-400); --brand-gold: var(--color-amber-400); --brand-gold-bright: var(--color-amber-300); --brand-gold-deep: var(--color-amber-500); --text-bright: var(--color-paper-0); --text-on-brand: var(--color-carbon-975); --ses-sovereignty: var(--color-khaki-300); --ses-sovereignty-bright: var(--color-khaki-200); --ses-sustainability: var(--color-rose-100); --ses-security: var(--color-blue-400); --surface-public-page: var(--color-carbon-950); --surface-public-deep: var(--color-carbon-975); --surface-public-card: var(--color-carbon-850); --surface-public-card-2: var(--color-carbon-825); --surface-public-card-3: var(--color-carbon-800); --surface-public-band: var(--color-carbon-940); --surface-public-well: var(--color-carbon-925); --surface-public-ridge: var(--color-carbon-900); /* The ground Spellbook paints under pages that never override body; tools rides it. Dark is the exact settings value (#1c1c1f). */ --surface-public-ground: var(--color-carbon-840); --border-public: var(--color-ink-600); --border-public-subtle: var(--color-carbon-775); --public-slate: var(--color-ink-650); --text-public-soft: var(--color-carbon-50); --text-public-soft-2: var(--color-carbon-100); --status-public-ok: var(--color-green-500); --status-public-warn: var(--color-amber-500); --status-public-err: var(--color-red-500); --terminal-green: var(--color-green-450); /* Text on chrome that stays dark in BOTH themes (navy CTAs, accent gradients, alarm chips). Deliberately absent from the light block. */ --text-on-dark: var(--color-paper-0); --surface-public-input: var(--color-carbon-930); --surface-public-input-focus: var(--color-navy-850); --surface-terminal: var(--color-black-alpha-60); /* Gold text deepens on paper for contrast; CTA backgrounds keep the vivid gold ramp. */ --brand-gold-text: var(--color-amber-300); --brand-gold-text-mid: var(--color-amber-400); --brand-gold-text-deep: var(--color-amber-500); /* Glass surfaces: translucent panels over backdrop blur. They flip to white glass in light; the step suffix names the opacity tier. */ --surface-glass-soft: var(--color-carbon-975-alpha-80); --surface-glass: var(--color-carbon-975-alpha-90); --surface-glass-heavy: var(--color-carbon-975-alpha-95); --surface-glass-panel: var(--color-carbon-925-alpha-95); --surface-glass-panel-heavy: var(--color-carbon-925-alpha-98); --surface-glass-card: var(--color-carbon-850-alpha-60); --surface-glass-card-heavy: var(--color-carbon-850-alpha-80); --surface-glass-band: var(--color-carbon-875-alpha-40); /* Contrast washes: foreground-tint overlays (hairlines, hover lifts). White in dark, black in light: a white lift is invisible on paper, so polarity flips with the theme. Step = opacity. */ --wash-1p5: var(--color-white-alpha-1p5); --wash-03: var(--color-white-alpha-03); --wash-04: var(--color-white-alpha-04); --wash-05: var(--color-white-alpha-05); --wash-06: var(--color-white-alpha-06); --wash-08: var(--color-white-alpha-08); --wash-10: var(--color-white-alpha-10); --wash-12: var(--color-white-alpha-12); --wash-18: var(--color-white-alpha-18); --wash-20: var(--color-white-alpha-20); /* Public-site identity and derived washes share this accent trio. * Change both dark and light trios together; the commented teal values restore Dispatch identity. */ --surface-editorial: var(--color-carbon-875); --border-editorial: var(--color-carbon-750); /* #333, the visible weight */ --border-editorial-subtle: var(--color-carbon-820); /* #222, default divider */ --text-editorial-dim: var(--color-sage-400); --text-editorial: var(--color-sage-200); --text-editorial-strong: var(--color-sage-100); --text-editorial-muted: var(--color-sage-500); --text-editorial-faint: var(--color-sage-600); /* Teal alternative: --editorial-accent: var(--color-teal-500); --editorial-accent-bright: var(--color-teal-300); --editorial-accent-soft: var(--color-teal-200); */ /* -- blue (active) -- */ --editorial-accent: var(--color-blue-500); --editorial-accent-bright: var(--color-blue-400); --editorial-accent-soft: var(--color-blue-300); /* Tinted washes of whatever hue is active. Derived, never hardcoded: this is why a hue flip needs no edit anywhere else. */ --editorial-wash-02: color-mix(in srgb, var(--editorial-accent) 2%, transparent); --editorial-wash-04: color-mix(in srgb, var(--editorial-accent) 4%, transparent); --editorial-wash-05: color-mix(in srgb, var(--editorial-accent) 5%, transparent); --editorial-wash-06: color-mix(in srgb, var(--editorial-accent) 6%, transparent); --editorial-wash-07: color-mix(in srgb, var(--editorial-accent) 7%, transparent); --editorial-wash-08: color-mix(in srgb, var(--editorial-accent) 8%, transparent); --editorial-wash-18: color-mix(in srgb, var(--editorial-accent) 18%, transparent); --editorial-wash-25: color-mix(in srgb, var(--editorial-accent) 25%, transparent); --editorial-wash-40: color-mix(in srgb, var(--editorial-accent) 40%, transparent); --editorial-wash-55: color-mix(in srgb, var(--editorial-accent) 55%, transparent); --editorial-wash-70: color-mix(in srgb, var(--editorial-accent) 70%, transparent); --editorial-gold: var(--color-gold-400); --editorial-blue: var(--color-indigo-400); --editorial-red: var(--color-red-450); } /* Light remaps the same roles: raised surfaces stay white, hues deepen, shadows use the light scale. * theme-preflight.js resolves data-theme before paint; do not add competing OS-theme media queries. * See ./token-guide.md for public-surface exceptions. */ :root[data-theme="light"] { /* ---- Surface stack ---- */ --surface-page: var(--color-paper-50); --surface-deep: var(--color-paper-100); --surface-base: var(--color-paper-0); --surface-raised: var(--color-paper-0); /* Input is a WELL, not a card: in dark it sits below --surface-base, so in light it has to sit below white rather than be white. Making it paper-0 would erase every form field's edge on a card. */ --surface-input: var(--color-paper-50); /* ---- Text ---- */ --text-primary: var(--color-ink-900); --text-secondary: var(--color-ink-600); --text-muted: var(--color-ink-500); --text-faint: var(--color-ink-400); --text-on-accent: var(--color-paper-0); /* Deeper blue preserves contrast on white; hover adds emphasis by darkening. */ --accent: var(--color-blue-600); --accent-hover: var(--color-blue-700); --accent-soft: var(--color-blue-alpha-08); --accent-soft-hover: var(--color-blue-alpha-12); --accent-rail: var(--color-blue-alpha-20); --accent-deep: var(--color-blue-700); /* ---- Primary button ---- */ --button-primary-bg: var(--color-blue-600); --button-primary-bg-hover: var(--color-blue-700); --button-primary-border: var(--color-blue-700); --button-primary-text: var(--text-on-accent); /* Deepen solid status hues; preserve the soft/hover alpha backgrounds. */ --success: var(--color-green-700); --danger: var(--color-red-700); --warning: var(--color-amber-700); --info: var(--color-violet-700); --info-soft: var(--color-violet-alpha-08); /* ---- Borders ---- */ --border: var(--color-paper-300); --border-subtle: var(--color-paper-200); /* ---- Elevation ---- */ --shadow-rest: var(--elevation-light-1); --shadow-raised: var(--elevation-light-2); --shadow-overlay: var(--elevation-light-3); /* Modal scrims stay black in both themes; image tints lighten without inverting. */ --overlay-tint: var(--color-black-alpha-30); --overlay-backdrop: var(--color-black-alpha-50); /* Public/editorial surfaces converge on paper; identity text hues deepen (CORE-012). * Keep navy console/CTA surfaces, dark on-brand text, gold CTA backgrounds, and video wells. */ --surface-public-page: var(--color-paper-100); --surface-public-deep: var(--color-paper-200); --surface-public-card: var(--color-paper-0); --surface-public-card-2: var(--color-paper-50); --surface-public-card-3: var(--color-paper-100); --surface-public-band: var(--color-paper-200); --surface-public-well: var(--color-paper-200); --surface-public-ridge: var(--color-paper-300); --surface-public-ground: var(--color-paper-100); --border-public: var(--color-paper-300); --border-public-subtle: var(--color-paper-200); --public-slate: var(--color-paper-300); --text-public-soft: var(--color-ink-600); --text-public-soft-2: var(--color-ink-500); --text-bright: var(--color-ink-900); --status-public-ok: var(--color-green-750); --status-public-warn: var(--color-amber-700); --status-public-err: var(--color-red-700); --terminal-green: var(--color-green-700); --surface-public-input: var(--color-paper-50); --surface-public-input-focus: var(--color-paper-100); --surface-terminal: var(--color-white-alpha-70); --brand-electric: var(--color-cyan-700); --brand-gold-text: var(--color-gold-600); --brand-gold-text-mid: var(--color-gold-600); --brand-gold-text-deep: var(--color-gold-700); --ses-sovereignty: var(--color-khaki-700); --ses-sovereignty-bright: var(--color-khaki-800); --ses-sustainability: var(--color-rose-700); --ses-security: var(--color-blue-600); --surface-glass-soft: var(--color-white-alpha-80); --surface-glass: var(--color-white-alpha-90); --surface-glass-heavy: var(--color-white-alpha-95); --surface-glass-panel: var(--color-white-alpha-95); --surface-glass-panel-heavy: var(--color-white-alpha-98); --surface-glass-card: var(--color-white-alpha-60); --surface-glass-card-heavy: var(--color-white-alpha-80); --surface-glass-band: var(--color-white-alpha-40); --wash-1p5: var(--color-black-alpha-1p5); --wash-03: var(--color-black-alpha-03); --wash-04: var(--color-black-alpha-04); --wash-05: var(--color-black-alpha-05); --wash-06: var(--color-black-alpha-06); --wash-08: var(--color-black-alpha-08); --wash-10: var(--color-black-alpha-10); --wash-12: var(--color-black-alpha-12); --wash-18: var(--color-black-alpha-18); --wash-20: var(--color-black-alpha-20); --surface-editorial: var(--color-paper-0); --border-editorial: var(--color-paper-300); --border-editorial-subtle: var(--color-paper-200); --text-editorial: var(--color-sage-800); --text-editorial-strong: var(--color-sage-900); --text-editorial-muted: var(--color-sage-700); --text-editorial-faint: var(--color-sage-500); --text-editorial-dim: var(--color-sage-600); /* Light teal alternative; change with dark: --editorial-accent: var(--color-teal-700); --editorial-accent-bright: var(--color-teal-600); --editorial-accent-soft: var(--color-teal-600); */ /* -- blue (active) -- */ --editorial-accent: var(--color-blue-700); --editorial-accent-bright: var(--color-blue-600); --editorial-accent-soft: var(--color-blue-600); --editorial-gold: var(--color-gold-700); --editorial-blue: var(--color-indigo-600); --editorial-red: var(--color-red-700); } /* Apply .dash-dense to repeated-row containers; children consume --row-* tokens. * Only this block remaps row spacing from the regular scale to the dense scale. */ .dash-dense { --row-pad-y: var(--space-dense-2); /* 8px */ --row-pad-x: var(--space-dense-3); /* 12px */ --row-gap: var(--space-dense-2); /* 8px */ --text-body: var(--text-weight-regular) var(--text-size-13) / var(--text-leading-normal) system-ui, sans-serif; }