/* ============================================================ DETSUITE — DESIGN TOKENS (L1.5 spine) ============================================================ The single source of truth for the visual language. Factory equipment per G-021. At L1.5.5 ("Product #2 placeholder + SHARED extraction validation") this file moves to AGENTS/SHARED/ui-kit/tokens.css and DetSuite + future products import from there. Mission anchor (CLAUDE.md): "Blue skies for the men and women in BLUE." Midnight sky over the city — deep navy, single accent blue, instrument-panel discipline. Calm, trust, speed. How the tokens map to the three pillars: P1 Safety — accessible contrast (WCAG AA targets); no light surfaces outside @media print. P2 Simple — ONE palette, ONE accent, six font sizes, three weights. Constraint = consistency. P3 Depth — token NAMES are stable across the factory; values can rotate per product theme. Naming convention: `--ds--`. Every new chunk lands tokens FROM HERE — never inline. ============================================================ */ :root { /* ──────────────────────────────────────────────────────── COLOR — NAVY DEPTH (3 layers + input bg) ──────────────────────────────────────────────────────── Three navy layers create depth without leaving the dark theme. Input background is its own token so form controls read distinct from cards. */ --ds-bg: #0a1628; /* deepest — page background */ --ds-bg-panel: #112240; /* panel / sticky chrome */ --ds-bg-card: #1a2d4f; /* elevated card / modal */ --ds-bg-input: #0d1f38; /* input / textarea */ /* ──────────────────────────────────────────────────────── COLOR — ACCENT (one primary, used SPARINGLY) ──────────────────────────────────────────────────────── "If everything is blue, nothing is." One accent for primary action / focus rings / current state. */ --ds-accent: #2D8DE0; /* primary action / focus */ --ds-accent-dim: #1a6eb5; /* hover / pressed */ --ds-accent-soft: rgba(45, 141, 224, 0.12); /* ──────────────────────────────────────────────────────── COLOR — SEMANTIC (four — calm-tone, not neon) ──────────────────────────────────────────────────────── Outdoor-readable. Maps to success / warning / danger / info. Each gets a soft companion for chip backgrounds. */ --ds-success: #22c55e; /* sage green */ --ds-warning: #f0a500; /* amber */ --ds-danger: #ef4444; /* rust red */ --ds-info: var(--ds-accent); --ds-success-soft: rgba(34, 197, 94, 0.12); --ds-warning-soft: rgba(240, 165, 0, 0.12); --ds-danger-soft: rgba(239, 68, 68, 0.12); --ds-info-soft: var(--ds-accent-soft); /* ──────────────────────────────────────────────────────── COLOR — TEXT (3 emphasis levels + inverse) ──────────────────────────────────────────────────────── */ --ds-text: #e8edf3; /* primary on dark */ --ds-text-muted: #8da4bf; /* secondary / captions */ --ds-text-dim: #6b7a8d; /* tertiary / placeholders */ --ds-text-inverse: #0a1628; /* on accent / light bg */ /* ──────────────────────────────────────────────────────── COLOR — BORDERS (hairline only) ──────────────────────────────────────────────────────── Never thick. 1px solid at low alpha = precise edge. */ --ds-border: rgba(255, 255, 255, 0.06); --ds-border-strong: rgba(255, 255, 255, 0.12); --ds-border-focus: var(--ds-accent); /* ──────────────────────────────────────────────────────── TYPOGRAPHY — FAMILIES ──────────────────────────────────────────────────────── Self-hosted per G-012. Until vendored at L1.6, system fallbacks render. The cascade names stay stable. */ --ds-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ──────────────────────────────────────────────────────── TYPOGRAPHY — SIZE SCALE (six steps, modular) ──────────────────────────────────────────────────────── 12 / 14 / 16 / 20 / 24 / 32. Nothing in between. Every text element picks one. */ --ds-fs-xs: 12px; /* fine print, glossary */ --ds-fs-sm: 14px; /* secondary UI, captions */ --ds-fs-md: 16px; /* body default */ --ds-fs-lg: 20px; /* prominent labels */ --ds-fs-xl: 24px; /* section headers */ --ds-fs-2xl: 32px; /* page titles */ /* ──────────────────────────────────────────────────────── TYPOGRAPHY — WEIGHTS (three only) ──────────────────────────────────────────────────────── No 500, no 800. Constraint = consistency. */ --ds-fw-regular: 400; --ds-fw-semibold: 600; --ds-fw-bold: 700; /* ──────────────────────────────────────────────────────── TYPOGRAPHY — LINE HEIGHTS ──────────────────────────────────────────────────────── */ --ds-lh-tight: 1.2; /* headings */ --ds-lh-snug: 1.4; /* body default */ --ds-lh-relaxed: 1.6; /* long-form (narratives, notes) */ /* ──────────────────────────────────────────────────────── SPACING — 8PX GRID (seven steps) ──────────────────────────────────────────────────────── Every margin/padding/gap picks one. 8px rhythm produces visual coherence without thinking about it. */ --ds-sp-1: 4px; /* tight */ --ds-sp-2: 8px; /* base unit */ --ds-sp-3: 12px; --ds-sp-4: 16px; /* default container padding */ --ds-sp-5: 24px; --ds-sp-6: 32px; --ds-sp-7: 48px; /* section breathing */ /* ──────────────────────────────────────────────────────── RADIUS (four steps + full circle) ──────────────────────────────────────────────────────── */ --ds-radius-sm: 4px; /* tags, pills */ --ds-radius-md: 6px; /* buttons */ --ds-radius-lg: 8px; /* cards, inputs */ --ds-radius-xl: 12px; /* modals, top-level surfaces */ --ds-radius-full: 999px; /* circle (avatars, badges) */ /* ──────────────────────────────────────────────────────── ELEVATION (3 levels via subtle shadow) ──────────────────────────────────────────────────────── No glow. No gradient in chrome. Cards lift on hover. */ --ds-elev-0: none; --ds-elev-1: 0 1px 2px rgba(0, 0, 0, 0.18); --ds-elev-2: 0 4px 12px rgba(0, 0, 0, 0.24); --ds-elev-3: 0 8px 24px rgba(0, 0, 0, 0.32); /* ──────────────────────────────────────────────────────── MOTION — DURATION + EASING (the soul) ──────────────────────────────────────────────────────── 150ms snap for hovers/inserts, 300ms page-level, spring for direct-manipulation (drag-drop). */ --ds-ease-snap: cubic-bezier(0.4, 0, 0.2, 1); --ds-ease-page: cubic-bezier(0.2, 0, 0, 1); --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ds-dur-fast: 150ms; --ds-dur-slow: 300ms; /* ──────────────────────────────────────────────────────── TAP TARGET (G-020 mobile-first minimum) ──────────────────────────────────────────────────────── Every clickable element is at least 44×44. */ --ds-tap-min: 44px; /* ──────────────────────────────────────────────────────── Z-INDEX (six layers, no random numbers) ──────────────────────────────────────────────────────── */ --ds-z-base: 0; --ds-z-sticky: 10; /* sticky headers */ --ds-z-overlay: 100; /* sheet, drawer */ --ds-z-modal: 1000; /* modal dialog */ --ds-z-toast: 2000; /* toast queue */ --ds-z-tooltip: 3000; /* tooltip layer */ /* ──────────────────────────────────────────────────────── LEGACY ALIASES (existing styles.css compatibility) ──────────────────────────────────────────────────────── Existing pages reference --navy, --card, --text, --accent etc. Bridge them to the new --ds- tokens so this file can be linked without breaking anything. The L6 beautification rollout removes these aliases page by page as each page migrates to --ds- directly. */ --navy: var(--ds-bg); --navy-mid: var(--ds-bg-panel); --navy-light: var(--ds-bg-card); --navy-top: var(--ds-bg-card); --card: var(--ds-bg-panel); --input-bg: var(--ds-bg-input); --text: var(--ds-text); --text-primary: var(--ds-text); /* L6.5 narrative + icr style */ --text-secondary: var(--ds-text-muted); --text-muted: var(--ds-text-muted); --text-dim: var(--ds-text-dim); --border: var(--ds-border); --accent: var(--ds-warning); /* amber, current brand */ --accent-red: var(--ds-danger); --blue: var(--ds-accent); --blue-light: var(--ds-accent); --success: var(--ds-success); --danger: var(--ds-danger); --font: var(--ds-font-ui); /* legacy font ref */ --radius: var(--ds-radius-lg); } /* ──────────────────────────────────────────────────────── ACCESSIBILITY — reduced motion ──────────────────────────────────────────────────────── Respect the OS preference: instant flips instead of motion. */ @media (prefers-reduced-motion: reduce) { :root { --ds-dur-fast: 0ms; --ds-dur-slow: 0ms; } } /* ──────────────────────────────────────────────────────── PRINT — Pillar #1 exception (light surfaces allowed) ──────────────────────────────────────────────────────── The only context where hardcoded light colors are OK. tokens.css does not redefine for print; pages opt in. */