/* Storm Developments - semantic design tokens * * This file is the public surface of the design system. Components * consume these tokens. Primitive scale tokens (--color-*, --space-N, * --text-size-N) live in _tokens-primitive.css and must not be * referenced from components. * * Imported by _ts/core/dashboard.css; loads via @core/dashboardStyles * inside any Svelte island that touches the dashboard surface. * * ============================================================ * Grammar (read this before adding tokens) * ============================================================ * * Surface stack. Five layered backgrounds, deepest to most raised. * --surface-page is the window background. --surface-deep sits * under it for the rare cavity. --surface-base is cards and panels. * --surface-raised is modals, popovers, hover lift. * --surface-input is the form-field background, distinct because * input is interactive, not display. * * Text. Four display roles plus on-accent. * --text-primary is body and headings. * --text-secondary is supporting copy (timestamps, meta). * --text-muted is hint text and placeholders. * --text-faint is one step deeper than muted: column-header labels, * eyebrows, empty-cell placeholders, anything that should fade * into the background unless deliberately read. * --text-on-accent is text rendered on --accent. * Use the role, not the value. Re-skinning swaps the role, not * every call site. * * Accent. One color. Storm's accent is a single blue. Status colors * (success, danger, warning) are separate semantic surfaces, not * variants of accent. Mixing them is a category error: accent * means "interactive," status means "result of an operation." * Accent variants: --accent (the base), --accent-hover * (interactive hover), --accent-soft / --accent-soft-hover (subtle * backgrounds), --accent-rail (the 20%-alpha left-rail accent for * HeadlineBand and state-rail StatCards), --accent-deep (the deeper * blue used as the bottom stop in accent-gradient surfaces like * cluster-geometry tanks). * * Borders. Two weights. * --border is the default divider. * --border-subtle is the half-step under it for nested or dense * contexts. There is no --border-strong; if you need more weight, * you wanted a different surface. (Claude Design proposed adding * --border-strong in the 2026-05-27 handoff; rejected — the rule * still holds. A "strong border" reads as either a panel boundary * or a focus state, both of which have their own treatments.) * * Status surfaces. Three families, each with the same soft / hover * pattern as accent: --success/--success-soft/--success-soft-hover, * --danger/--danger-soft/--danger-soft-hover, * --warning/--warning-soft/--warning-soft-hover. The soft variants * are 8%-alpha backgrounds; the hover variants are 15%-alpha. Use * for status-tinted panels, callouts, and message backgrounds. * * Spacing. 8px base, six steps (--space-1 = 8px through --space-6 = * 64px). Components consume --space-* directly for content * surfaces and consume --row-pad-y, --row-pad-x, --row-gap for * repeated rows. Inside .dash-dense, the --row-* tokens re-map to * a 4px dense scale (4/8/12/16); outside, they map to the regular * scale. A new spacing value requires a new token. No magic numbers. * * Type. Six bundled roles, used as a single `font` shorthand: * .dash-card-title { font: var(--text-h3); } * Roles are caption, body, lead, h3, h2, h1. Each bundles * font-size, line-height, font-weight. There is no numeric scale * on the public surface. A one-off size gets a new role token. * * Radius. Five steps. * sm: controls, badges, inline tags. * md: cards, panels, dropdowns. * lg: modals, large overlays. * xl: hero panels, oversized surfaces. * pill: capsule buttons, badge pills. * * Primary button. --button-primary-* is the codified filled-CTA hue * (deeper than bare --accent; see the block comment at the tokens). * * Overlay tints. --overlay-tint sits under text on arbitrary images; * --overlay-backdrop is the modal scrim (black in both themes). * * Fonts. --font-sans / --font-mono alias the primitive family stacks. * --info is the fourth status hue (violet), informational only. * * Elevation. Three shadow steps. * --shadow-rest: cards in place. * --shadow-raised: hover lift, popovers. * --shadow-overlay: modals, drawers, anything portal-rendered. * No interpolation. Pick the right one. * * Motion. Two durations, two easings. * --motion-quick (180ms): immediate feedback (hover, focus, press). * --motion-slow (240ms): entering and exiting layered surfaces * (modals, drawers, dropdowns). * --ease-out: entrances. * --ease-in-out: state transitions on existing elements. * * Public surface (ADR core/012). The marketing site joins this one * system with a bounded identity section: --brand-electric (the * Storm cyan, the one sanctioned second accent, decorative identity * only, never interactive-state semantics), the --brand-gold ramp * (the CTA gold), --text-bright / --text-on-brand (marketing * max-contrast text and text on gold), the --ses-* trio (the Three * Ses value colors), and the --surface-public-* blacks (the * pure-neutral marketing ramp, distinct from the ink surfaces * until convergence is designed). Dark values are the exact * pre-tokenization hex. Light values are deliberately NOT authored * yet: the light block leaves them alone, so they inherit dark. * Authoring them is the flip-blocking work of a later CORE-012 * unit; do not add them piecemeal. The editorial section extends * this: --surface-editorial, the --text-editorial ramp, and the * --editorial-* identity accents (teal/gold/blue/red) carry the * Dispatch/guide/blog identity, consumed through the --dispatch-* * component vocabulary in static/css/dispatch-tokens.css. * * Density. .dash-dense is a container class that re-maps row-level * tokens to denser variants. Apply it to anything that renders as * a list of repeating items: fleet rows, sidebar nav, table rows, * badge groups. Modals, cards, and forms stay outside. The .dash- * dense block at the bottom of this file is the only place that * re-maps --row-* tokens; components never override them directly. * * See ADR core/006 for the full architecture. * ============================================================ */ :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); /* ---- Primary button (codified hue for filled "do the thing" CTAs) * * The bare `--accent` (#1e90ff) is a vivid dodger-blue that reads * great as link color and on accent-soft chips, but is too neon for * a button's full-bleed background — white text against #1e90ff * passes WCAG-AA on the number but FEELS strenuous to look at. * * `--button-primary-bg` is the deeper hue (#2563eb) and is what * filled primary buttons render with. Hover lifts toward the * brighter `--accent`, keeping the interaction signal. * * Reach for these in primary "+New" / "Open inbox" / "Start * playbook" CTAs. For low-emphasis or ghost variants, keep using * `--accent` as text color and `--accent-soft` as background. */ --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); /* ---- 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-pill); /* ---- 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-as-text roles: display text that is gold-clipped. The CTA BACKGROUND keeps the vivid --brand-gold ramp in both themes (dark text on gold passes everywhere); these text roles walk deep in light because vivid gold text on paper fails even AA-large. */ --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); /* ---- Editorial surface (ADR core/012, dispatch-tokens unit) ---- * The Dispatch/guide/blog identity. --editorial-teal-soft is a SOLID * pale teal from the Dispatch vocabulary, not an alpha wash; the * -soft alpha convention applies to accent/status families only. * Same light-deferral as the public section above. */ --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); --editorial-teal: var(--color-teal-500); --editorial-teal-bright: var(--color-teal-300); --editorial-teal-soft: var(--color-teal-200); --editorial-gold: var(--color-gold-400); --editorial-blue: var(--color-indigo-400); --editorial-red: var(--color-red-450); } /* ============================================================ Light theme ============================================================ * * The block above is the dark theme and stays the bare `:root` default, * so anything that never learns about themes keeps rendering exactly as * it did. This block re-maps the SAME roles onto the paper ramp; it adds * no token and renames none. If a light value needs a role that does not * exist in dark, the grammar is wrong, not this block. * * `data-theme` carries the RESOLVED theme ('light' or 'dark'), never the * preference: `static/js/theme-preflight.js` resolves 'system' against * prefers-color-scheme before first paint and writes the answer here. * That is why there is no @media (prefers-color-scheme) block anywhere in * this file, and why one must not be added: two independent sources for * the same fact is how a toggle stops being able to override the OS. * * Three inversions worth naming, because each is a place where the dark * value is not merely darker: * * - The surface stack does NOT flip end to end. In dark, "raised" is * lighter than the page. In light, raised is WHITE and the page is * grey: the card still steps toward the viewer, but by losing tint, * not by gaining brightness. --surface-deep is the one true inversion * (a cavity gets darker than the page in both themes). * - Status and accent hues walk deeper (the -700 primitives), because a * hue calibrated to glow on near-black is pale on white. * - Shadows come off a separate scale entirely (--elevation-light-*). * Reusing the dark scale here reads as a smudge, not a lift. */ :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); /* ---- Accent ---- * `--accent` deepens to blue-600 here. The dark theme's #1e90ff is a * link color chosen to hold against near-black; on white it drops to * roughly 3:1 and fails AA at body size. Hover goes DEEPER rather than * brighter, because on paper "more emphasis" means more ink. */ --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); /* ---- Status ---- * The soft/hover alphas carry over unchanged: an 8%-alpha hue over * white is a pale tint of the same family, which is the intent. Only * the solid hues walk deeper. */ --success: var(--color-green-700); --danger: var(--color-red-700); --warning: var(--color-amber-700); --info: var(--color-violet-700); /* ---- 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); /* ---- Overlay tints ---- * The backdrop stays black: a modal scrim dims the page in both * themes, so inverting it to white would brighten what it means to * push away. --overlay-tint drops to a lighter black because it sits * UNDER text meant to be read against an arbitrary image. */ --overlay-tint: var(--color-black-alpha-30); --overlay-backdrop: var(--color-black-alpha-50); /* ---- Public + editorial surfaces (ADR core/012 light-authoring) ---- * The three dark identity ramps (carbon, steel-era blacks, editorial * surface) all converge onto the ONE paper ramp here: light is the * convergence moment. Hues walk deeper per the sealed rule. Deliberate * non-remaps, recorded as authored choices, not omissions: the navy * console/CTA primitives, --text-on-brand (dark text on gold works in * both themes), the vivid --brand-gold CTA ramp (background only; the * --brand-gold-text roles walk deep instead), and --guide-black / * --home-video-well (video letterbox is black everywhere). */ --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); --editorial-teal: var(--color-teal-700); --editorial-teal-bright: var(--color-teal-600); --editorial-teal-soft: var(--color-teal-600); --editorial-gold: var(--color-gold-700); --editorial-blue: var(--color-indigo-600); --editorial-red: var(--color-red-700); } /* ---- Density: container-typed row token re-mapping ---- * * Apply .dash-dense to a container whose children are repeating rows. * Children consume --row-* tokens; outside .dash-dense they resolve to * the regular 8px scale, inside they resolve to the 4px dense scale. * This is the only place --row-* is re-mapped. Do not override --row-* * directly inside individual components. */ .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; }