/* ============================================================ tokens.css — KIC Mission Control design tokens ------------------------------------------------------------ Single source of truth for colours, typography, spacing, and radii. Every other CSS file in the system reads from here via var(--token-name). Extracted from Stitch dashboard_mission_control_desktop Tailwind config (the canonical superset across all screens). Apply to as the only design system. Do not introduce additional palettes, fonts, or spacing scales without updating this file first. ============================================================ */ :root { /* ---------------------------------------------------------- COLOUR TOKENS Material 3 dark-theme palette. IMPORTANT NAMING: --primary is light orange #ffb690 (used for headlines + accent text). --primary-container is the vivid orange #f97316 (used for filled buttons + active states + critical highlights). Don't swap them — they're not aliases, they're a paired text/background system. ---------------------------------------------------------- */ /* Background + surface stack (darkest → brightest) */ --background: #0b1326; --surface: #0b1326; --surface-dim: #0b1326; --surface-container-lowest: #060e20; --surface-container-low: #131b2e; --surface-container: #171f33; --surface-container-high: #222a3d; --surface-container-highest: #2d3449; --surface-variant: #2d3449; --surface-bright: #31394d; /* Text on backgrounds */ --on-background: #dae2fd; --on-surface: #dae2fd; --on-surface-variant: #e0c0b1; /* Outline (borders, dividers, focus rings) */ --outline: #a78b7d; --outline-variant: #584237; /* Primary — orange family (the brand accent) */ --primary: #ffb690; /* light orange — text/icon accent */ --primary-container: #f97316; /* vivid orange — fill/CTA */ --primary-fixed: #ffdbca; --primary-fixed-dim: #ffb690; --on-primary: #552100; --on-primary-container: #582200; /* dark text on orange fill */ --on-primary-fixed: #341100; --on-primary-fixed-variant: #783200; --surface-tint: #ffb690; --inverse-primary: #9d4300; /* Secondary — sky blue (informational, links, focus rings, sparklines) */ --secondary: #89ceff; --secondary-container: #00a2e6; --secondary-fixed: #c9e6ff; --secondary-fixed-dim: #89ceff; --on-secondary: #00344d; --on-secondary-container: #00344e; --on-secondary-fixed: #001e2f; --on-secondary-fixed-variant: #004c6e; /* Tertiary — emerald (positive, healthy, confirmed, completed) */ --tertiary: #4edea3; --tertiary-container: #00b07a; --tertiary-fixed: #6ffbbe; --tertiary-fixed-dim: #4edea3; --on-tertiary: #003824; --on-tertiary-container: #003b26; --on-tertiary-fixed: #002113; --on-tertiary-fixed-variant: #005236; /* Error — coral (overdue, failed, negative, alert) */ --error: #ffb4ab; --error-container: #93000a; --on-error: #690005; --on-error-container: #ffdad6; /* Inverse surfaces (rare — for highlights, tooltips, snack-bars) */ --inverse-surface: #dae2fd; --inverse-on-surface: #283044; /* ---------------------------------------------------------- SEMANTIC ALIASES Use these in components.css and pages.css when intent is more important than the underlying token. Encoded as aliases so a future palette swap doesn't ripple. ---------------------------------------------------------- */ --bg: var(--background); --text: var(--on-surface); --text-muted: var(--on-surface-variant); --text-faint: rgba(218, 226, 253, 0.42); /* on-surface @ 42% */ --accent: var(--primary); /* light orange — text + icons */ --accent-strong: var(--primary-container); /* vivid orange — fill + CTA */ --accent-on: var(--on-primary-container); /* dark brown — text ON vivid orange */ --info: var(--secondary); --good: var(--tertiary); --bad: var(--error); --border: var(--outline-variant); --border-strong: var(--outline); --focus-ring: var(--secondary); /* ---------------------------------------------------------- SPACING SCALE Base unit = 4px. Keep using these names everywhere. ---------------------------------------------------------- */ --space-unit: 4px; --space-xs: 4px; --space-sm: 8px; --space-gutter: 12px; --space-md: 16px; --space-container: 16px; --space-lg: 24px; --space-xl: 40px; /* ---------------------------------------------------------- RADII Material 3 small-radius set. The system feels sharper than typical SaaS UIs — most surfaces use --radius-default (2px) or --radius-lg (4px). --radius-xl (8px) is for cards. --radius-full (12px) is for the largest soft surfaces. For pills, use border-radius: 9999px directly. ---------------------------------------------------------- */ --radius-default: 2px; /* 0.125rem */ --radius-lg: 4px; /* 0.25rem */ --radius-xl: 8px; /* 0.5rem */ --radius-full: 12px; /* 0.75rem */ --radius-pill: 9999px; /* ---------------------------------------------------------- TYPOGRAPHY One family — Inter. Five named scales matching Stitch. Material Symbols Outlined for icons (loaded as webfont in base.css). ---------------------------------------------------------- */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Inter', 'SF Mono', Menlo, Consolas, monospace; /* Stitch uses Inter even for mono. The mono variant is created by tracking + tabular-nums in components.css, not a different family. */ /* Display large — page hero headings ("Good morning, David") */ --font-display-lg-size: 32px; --font-display-lg-line: 1.2; --font-display-lg-track: -0.02em; --font-display-lg-weight: 700; /* Headline medium — section headings, page titles, modal titles */ --font-headline-md-size: 20px; --font-headline-md-line: 1.4; --font-headline-md-track: -0.01em; --font-headline-md-weight: 600; /* Body base — paragraph text, table cells, form inputs */ --font-body-base-size: 14px; --font-body-base-line: 1.5; --font-body-base-track: 0em; --font-body-base-weight: 400; /* Label caps — eyebrows, table headers, tiny chip text */ --font-label-caps-size: 11px; --font-label-caps-line: 1; --font-label-caps-track: 0.06em; --font-label-caps-weight: 700; /* Data mono — numerals, deal sizes, timestamps, IDs */ --font-data-mono-size: 13px; --font-data-mono-line: 1.2; --font-data-mono-track: 0.02em; --font-data-mono-weight: 500; /* ---------------------------------------------------------- LAYOUT CONSTANTS Read by base.css and components.css. ---------------------------------------------------------- */ --sidebar-width: 256px; --topbar-height: 64px; --content-max: 1280px; --modal-width: 640px; --modal-width-wide: 860px; /* ---------------------------------------------------------- TRANSITIONS Two speeds: fast for hovers/focus, slow for page changes. Easing matches Material 3 standard. ---------------------------------------------------------- */ --t-fast: 150ms; --t-slow: 240ms; --ease: cubic-bezier(0.2, 0, 0, 1); /* ---------------------------------------------------------- Z-INDEX SCALE Don't free-form z-index values in component CSS. Use these. ---------------------------------------------------------- */ --z-base: 1; --z-sticky: 10; --z-topbar: 40; --z-sidebar: 50; --z-modal-bg: 100; --z-modal: 110; --z-toast: 200; }