/* Stratamize Operational Orbit — design tokens v1.0 */ :root { /* Brand primitives */ --stz-ink-950: #071521; --stz-navy-800: #0c3446; --stz-cyan-500: #00a7e1; --stz-cyan-700: #006d93; --stz-sky-300: #72dcff; --stz-lime-400: #b7f52b; --stz-foam-50: #f4f9f8; --stz-mist-100: #e8f2f3; --stz-paper: #ffffff; --stz-slate-600: #4b5d68; --stz-rule-300: #cedde2; --stz-coral-500: #ff6b4a; --stz-ink-900: #0a1e2e; --stz-slate-300: #9db0bc; /* Semantic colors */ --stz-text: var(--stz-ink-950); --stz-text-muted: var(--stz-slate-600); --stz-surface-canvas: var(--stz-foam-50); --stz-surface-panel: var(--stz-paper); --stz-surface-shell: var(--stz-ink-950); --stz-action-primary: var(--stz-lime-400); --stz-action-secondary: var(--stz-cyan-700); --stz-focus: var(--stz-coral-500); --stz-status-success: #18794e; --stz-status-info: var(--stz-cyan-700); --stz-status-warning: #a15c00; --stz-status-danger: #c9382d; /* Typography */ --stz-font-display: "Barlow Condensed", "Bahnschrift Condensed", "Arial Narrow", sans-serif; --stz-font-body: "Inter", "Segoe UI", Arial, sans-serif; --stz-font-utility: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace; --stz-leading-display: .92; --stz-leading-body: 1.55; /* Geometry */ --stz-radius-control: 10px; --stz-radius-card: 14px; --stz-radius-panel: 22px; --stz-radius-feature: 32px; --stz-shadow-card: 0 10px 30px rgba(7, 21, 33, .08); --stz-shadow-feature: 0 24px 80px rgba(7, 21, 33, .16); /* Motion */ --stz-motion-fast: 120ms cubic-bezier(.2, .8, .2, 1); --stz-motion-standard: 180ms cubic-bezier(.2, .8, .2, 1); --stz-motion-route: 420ms cubic-bezier(.2, .8, .2, 1); /* Layout */ --stz-space-1: 4px; --stz-space-2: 8px; --stz-space-3: 12px; --stz-space-4: 16px; --stz-space-5: 24px; --stz-space-6: 32px; --stz-space-7: 48px; --stz-space-8: 64px; --stz-content-wide: 1180px; } @media (prefers-reduced-motion: reduce) { :root { --stz-motion-fast: 1ms linear; --stz-motion-standard: 1ms linear; --stz-motion-route: 1ms linear; } } /* ------------------------------------------------------------------------- Theme: dark — for dashboards / app surfaces by USER PREFERENCE only. Marketing / frontend stays light: set data-theme="light" on . Only semantic surface/text/rule/shadow roles flip; brand color (Signal Lime, Route Cyan, Coral) is constant. The light :root above remains the first definition of every token, so token/JSON parity is unaffected. ------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --stz-text: var(--stz-foam-50); --stz-text-muted: var(--stz-slate-300); --stz-surface-canvas: var(--stz-ink-900); --stz-surface-panel: var(--stz-navy-800); --stz-surface-shell: var(--stz-ink-950); --stz-action-secondary: var(--stz-cyan-500); --stz-status-info: var(--stz-cyan-500); --stz-rule-300: #22414f; --stz-shadow-card: 0 10px 30px rgba(2, 8, 14, .5); --stz-shadow-feature: 0 24px 80px rgba(2, 8, 14, .62); } /* Follow the OS when the user has not explicitly chosen a theme (an explicit data-theme="light" opts out — that is how the frontend guarantees it stays light regardless of OS setting). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --stz-text: var(--stz-foam-50); --stz-text-muted: var(--stz-slate-300); --stz-surface-canvas: var(--stz-ink-900); --stz-surface-panel: var(--stz-navy-800); --stz-surface-shell: var(--stz-ink-950); --stz-action-secondary: var(--stz-cyan-500); --stz-status-info: var(--stz-cyan-500); --stz-rule-300: #22414f; --stz-shadow-card: 0 10px 30px rgba(2, 8, 14, .5); --stz-shadow-feature: 0 24px 80px rgba(2, 8, 14, .62); } }