/* ========================================================================== SafeTrack — Design tokens The single source of truth for global visual values. Loaded first, before themes.css, app.css and v3.css. Documented in docs/DESIGN_TOKENS.md. 1. Primitives raw palette and scales. Components never use these directly. 2. Semantic what components use: --st-bg-*, --st-text-*, --st-danger-* … 3. Legacy the older variable names, kept as aliases so every existing page keeps working until its component is migrated. Themes (themes.css) override only the brand and action tokens. Breakpoints cannot be variables: the standard is sm 480, md 768, lg 1024, xl 1280. The shell uses lg and xl (shell.css); 900px remains only in older module layouts until those pages are redesigned. ========================================================================== */ :root { /* ── 1. Primitives ───────────────────────────────────────────────────── */ --st-white: #FFFFFF; --st-gray-25: #F7F8FA; --st-gray-50: #F3F4F6; --st-gray-100: #EEF1F4; --st-gray-200: #E2E6EA; --st-gray-300: #C9D1D9; --st-gray-350: #AEB9C4; --st-gray-400: #7D8996; --st-gray-450: #687483; --st-gray-500: #687684; --st-gray-600: #5B6875; --st-gray-700: #3D4A57; --st-gray-900: #15202B; --st-navy-900: #0F2B3D; --st-blue-600: #1D5FA6; --st-blue-50: #E4EEF8; --st-hivis-400: #F2B31B; --st-red-700: #B42318; --st-red-50: #FDE7E5; --st-orange-700: #B4460F; --st-orange-50: #FDE8DB; --st-amber-700: #9A5B00; --st-amber-50: #FDF1D8; --st-green-700: #1B7A4B; --st-green-50: #E3F3EA; /* ── 2. Semantic: surfaces, text, borders ───────────────────────────── */ --st-bg-app: var(--st-gray-50); --st-bg-surface: var(--st-white); --st-bg-sunken: var(--st-gray-25); --st-bg-muted: var(--st-gray-100); --st-text: var(--st-gray-900); --st-text-secondary: var(--st-gray-700); --st-text-muted: var(--st-gray-600); /* 5.2:1 on the app background */ --st-text-placeholder: var(--st-gray-450); /* 4.8:1 on white fields */ --st-text-inverse: var(--st-white); --st-border-subtle: var(--st-gray-200); /* dividers, card edges */ --st-border: var(--st-gray-300); /* stronger decorative lines */ --st-border-control: var(--st-gray-400); /* 3:1 for form controls */ --st-border-control-hover: var(--st-gray-600); --st-border-hover: var(--st-gray-350); /* hovered buttons and fields */ /* Brand and action (themes override these) */ --st-brand-ink: var(--st-navy-900); /* sidebar and dark panels */ --st-action: var(--st-blue-600); /* primary buttons, links */ --st-action-hover: color-mix(in srgb, var(--st-action) 85%, black); --st-action-subtle: var(--st-blue-50); --st-accent-hivis: var(--st-hivis-400); /* hi-vis marker, used sparingly */ /* Focus */ --st-focus: var(--st-action); /* on light surfaces */ --st-focus-inverse: var(--st-accent-hivis); /* on dark surfaces such as the sidebar */ --st-ring: 0 0 0 3px color-mix(in srgb, var(--st-action) 28%, transparent); /* ── 2. Semantic: status (fg = text/icon, bg = tint, solid = filled) ── */ --st-danger-fg: var(--st-red-700); --st-danger-bg: var(--st-red-50); --st-danger-solid: var(--st-red-700); --st-caution-fg: var(--st-orange-700); --st-caution-bg: var(--st-orange-50); --st-warning-fg: var(--st-amber-700); --st-warning-bg: var(--st-amber-50); --st-success-fg: var(--st-green-700); --st-success-bg: var(--st-green-50); --st-info-fg: var(--st-blue-600); --st-info-bg: var(--st-blue-50); --st-neutral-fg: var(--st-gray-700); --st-neutral-bg: var(--st-gray-100); /* Severity (risk level) — always shown with its label as well as colour */ --st-sev-low: var(--st-success-fg); --st-sev-medium: var(--st-warning-fg); --st-sev-high: var(--st-caution-fg); --st-sev-critical: var(--st-danger-fg); /* Charts (screen) — charts keep their current colours until the chart phase */ --st-viz-text: var(--st-gray-900); --st-viz-muted: var(--st-gray-500); /* ── 2. Typography ──────────────────────────────────────────────────── */ --st-font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --st-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --st-text-2xs: 11px; /* chart ticks and legends only */ --st-text-xs: 12px; --st-text-sm: 13px; --st-text-base: 14px; --st-text-md: 16px; --st-text-lg: 18px; --st-text-xl: 20px; --st-text-2xl: 24px; --st-text-3xl: 28px; --st-text-display: 34px; --st-leading-tight: 1.25; --st-leading-snug: 1.4; --st-leading-body: 1.55; --st-weight-regular: 400; --st-weight-medium: 500; --st-weight-semibold: 600; --st-weight-bold: 700; --st-weight-heavy: 800; /* ── 2. Spacing (4px base) ──────────────────────────────────────────── */ --st-space-1: 4px; --st-space-2: 8px; --st-space-3: 12px; --st-space-4: 16px; --st-space-5: 20px; --st-space-6: 24px; --st-space-8: 32px; --st-space-10: 40px; --st-space-12: 48px; /* ── 2. Radius ──────────────────────────────────────────────────────── */ --st-radius-xs: 4px; --st-radius-sm: 6px; --st-radius-md: 8px; --st-radius-lg: 14px; --st-radius-pill: 999px; /* ── 2. Shadow ──────────────────────────────────────────────────────── */ --st-shadow-xs: 0 1px 2px rgba(16, 32, 48, .18); /* primary buttons */ --st-shadow-sm: 0 1px 2px rgba(16, 32, 48, .05), 0 0 0 1px rgba(16, 32, 48, .02); --st-shadow-md: 0 10px 24px -16px rgba(16, 32, 48, .45); --st-shadow-overlay: 0 24px 60px -18px rgba(12, 28, 44, .35), 0 2px 6px rgba(12, 28, 44, .08); --st-overlay: rgba(8, 20, 30, .55); /* dimmed page behind a modal */ /* ── 2. Layering (today's order; do not reorder without a decision) ──── */ --st-z-raised: 1; --st-z-sticky: 50; --st-z-drawer-backdrop: 99; --st-z-drawer: 100; --st-z-dropdown: 130; --st-z-skip-link: 300; --st-z-palette: 400; --st-z-tooltip: 500; --st-z-modal: 1000; --st-z-modal-stacked: 1001; /* ── 2. Motion ──────────────────────────────────────────────────────── */ --st-duration-fast: 120ms; --st-duration-base: 200ms; --st-duration-slow: 300ms; --st-ease: ease; --st-ease-out: ease-out; /* ── 2. Layout ──────────────────────────────────────────────────────── */ --st-sidebar-w: 252px; --st-sidebar-rail: 72px; --st-topbar-h: 60px; --st-content-max: 1480px; --st-gutter-sm: 16px; --st-gutter-md: 24px; --st-gutter-lg: 32px; /* ── 3. Legacy aliases ────────────────────────────────────────────────── Older names used across the modules. They follow the tokens above, so themes and token changes reach every page. New code uses --st-* only. "deprecated" = keep working, stop using, remove in the final clean-up. */ --c-bg: var(--st-bg-app); --c-surface: var(--st-bg-surface); --c-surface-2: var(--st-bg-sunken); --c-border: var(--st-border-subtle); --c-border2: var(--st-border); --c-text: var(--st-text); --c-text-2: var(--st-text-secondary); --c-muted: var(--st-text-muted); --c-ink: var(--st-brand-ink); --c-accent-md: var(--st-action); --c-accent-lt: var(--st-action-subtle); --c-hivis: var(--st-accent-hivis); --c-green: var(--st-success-fg); --c-green-lt: var(--st-success-bg); --c-amber: var(--st-warning-fg); --c-amber-lt: var(--st-warning-bg); --c-orange: var(--st-caution-fg); --c-orange-lt: var(--st-caution-bg); --c-red: var(--st-danger-fg); --c-red-lt: var(--st-danger-bg); --radius-sm: var(--st-radius-sm); --radius: var(--st-radius-md); --radius-lg: var(--st-radius-lg); --shadow: var(--st-shadow-sm); --shadow-pop: var(--st-shadow-overlay); --ring: var(--st-ring); --sidebar-w: var(--st-sidebar-w); --sidebar-rail: var(--st-sidebar-rail); --topbar-h: var(--st-topbar-h); --font-ui: var(--st-font-sans); --font-mono: var(--st-font-mono); --viz-text: var(--st-viz-text); --viz-muted: var(--st-viz-muted); /* deprecated */ --c-accent: var(--st-brand-ink); /* despite the name, this is the dark brand ink */ --c-blue: var(--st-action); --c-blue-lt: var(--st-action-subtle); --c-primary: var(--st-action); --c-sidebar-bg: var(--st-brand-ink); --primary: var(--st-action); --accent: var(--st-action); --border: var(--st-border-subtle); --card-bg: var(--st-bg-surface); --text: var(--st-text); --text-primary: var(--st-text); --text-secondary: var(--st-text-secondary); --text-muted: var(--st-text-muted); --hover-bg: var(--st-bg-sunken); /* deprecated — v3 dashboard/Insights tones. Their exact values differ slightly from the status tokens; Phase 2 moves these components onto --st-*-fg/bg. */ --good: #0B7A0B; --good-lt: #E3F4E3; --warn: #8A5A00; --warn-lt: #FDF1D6; --bad: var(--st-danger-fg); --bad-lt: var(--st-danger-bg); --info: var(--st-info-fg); --info-lt: var(--st-info-bg); }