/* ============================================================================ PROVENANCE - canonical Operational Orbit token block, consumed VERBATIM. Source: github.com/Stratamize/stratamize-brand @ fe8f56ef6b314e6672d882182853bea70fcb295f File: stratamize-tokens.css (design tokens v1.0) Upstream bytes: 5804 (LF) Upstream sha256: 03f46e79e21dc8f4a3f2359916a997f5bd35fca6b3d6fe445e47179ecef8bc44 (sha256 of the upstream file body BELOW this header, LF-normalized, i.e. everything from the first line after this comment block.) Rule: do not edit here; change the brand spine and re-vendor. This file and the inline invoice-document token block are the ONLY places a raw color value may appear in Stratamize Invoicing presentation. ============================================================================ */ /* 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; /* Coral darkened from #ff6b4a so the focus ring clears the WCAG 2.2 3:1 non-text floor (SC 1.4.11 / 2.4.11) on paper and foam-50. Hue is held at ~11deg; only luminance moves. */ --stz-coral-500: #ea5e3f; --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; /* Paired foregrounds. Every filled role above has exactly one legal text / icon color, and it is named here. Never guess a foreground on a fill: #ffffff on Signal Lime is 1.30:1 and unreadable. These flip with the theme wherever the underlying fill flips. */ --stz-on-action-primary: var(--stz-ink-950); --stz-on-action-secondary: var(--stz-paper); --stz-on-surface-shell: var(--stz-foam-50); --stz-on-status-success: var(--stz-paper); --stz-on-status-info: var(--stz-paper); --stz-on-status-warning: var(--stz-paper); --stz-on-status-danger: var(--stz-paper); /* 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 . Semantic surface/text/rule/shadow roles flip, and so do the four status colors and the on-* paired foregrounds: a green readable on foam is not readable on navy. Brand color is constant — Signal Lime stays the one primary action and Coral stays focus-only. The light :root above remains the first definition of every token, so token/JSON parity is unaffected. This block and the prefers-color-scheme block below must stay identical; scripts/check-contrast.mjs fails the build if they drift. ------------------------------------------------------------------------- */ :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); /* Status hues held; luminance raised so each clears 4.5:1 on BOTH dark surfaces. navy-800 panel is the binding constraint, not ink-900 canvas. */ --stz-status-success: #0db067; --stz-status-warning: #dd850e; --stz-status-danger: #fe6a5e; --stz-on-action-secondary: var(--stz-ink-950); --stz-on-status-success: var(--stz-ink-950); --stz-on-status-info: var(--stz-ink-950); --stz-on-status-warning: var(--stz-ink-950); --stz-on-status-danger: var(--stz-ink-950); --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-status-success: #0db067; --stz-status-warning: #dd850e; --stz-status-danger: #fe6a5e; --stz-on-action-secondary: var(--stz-ink-950); --stz-on-status-success: var(--stz-ink-950); --stz-on-status-info: var(--stz-ink-950); --stz-on-status-warning: var(--stz-ink-950); --stz-on-status-danger: var(--stz-ink-950); --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); } }