/* css/tokens.css — design tokens: color, type, spacing, motion. Night mode = [data-theme="night"] on . Reduced motion respected globally. */ :root { /* navy scale */ --bg-0: #0B1220; --bg-1: #0F1A2E; --bg-2: #14233D; --line: #1E3A5F; --line-soft: rgba(30, 58, 95, .55); --text-0: #E8EEF4; --text-1: #8B9CB8; --text-2: #5B6B85; --c-cyan: #00D4FF; --c-cyan-dim: #0A7FA6; --c-warning: #FFD600; --c-alarm: #FF3D5A; --c-ok: #00E676; --c-transient: #FF9100; --c-lost: #5B6B85; --c-muted: #5B6B85; --c-info: #3DA5FF; --font-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif; --font-ui: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', monospace; --radius: 4px; --header-h: 56px; --rail-w: 280px; --panel-w: 380px; --dock-h: 200px; /* owner review 12.09: 170px clipped the 5th telemetry row + the 24h counters */ --dock-collapsed-h: 36px; --dur-fast: 120ms; --dur-med: 260ms; color-scheme: dark; } /* ---- night / high-contrast mode --------------------------------------- */ :root[data-theme="night"] { --bg-0: #000000; --bg-1: #050505; --bg-2: #0A0A0A; --line: #00FFFF; --line-soft: rgba(0, 255, 255, .35); --text-0: #00FFFF; --text-1: #00CFCF; --text-2: #068a8a; --c-cyan: #00FFFF; --c-cyan-dim: #00AFAF; --c-warning: #FFFF00; --c-alarm: #FF0040; --c-ok: #00FF80; --c-transient: #FF9100; --c-lost: #4a4a4a; --c-info: #00FFFF; font-size: 115%; } html, body { background: var(--bg-0); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-ui); color: var(--text-0); background: var(--bg-0); -webkit-font-smoothing: antialiased; } .mono, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "liga" 0, "calt" 0; } ::selection { background: var(--c-cyan); color: #001018; } /* ---- reduced motion: keep pulses static ------------------------------- */ @media (prefers-reduced-motion: reduce) { .pulse, .pulse-ring, .flash, .new-slide, .sonar-sweep, .spin, .station-pulse-ring, .alert-row.status-NOWY, .badge.pulse { animation: none !important; } } /* ---- shared keyframes -------------------------------------------------- */ @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes pulseRing { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } } @keyframes flashBorder { 0% { box-shadow: 0 0 0 0 var(--flash-color, var(--c-alarm)); } 100% { box-shadow: 0 0 0 8px transparent; } } @keyframes glowAlarm { 0%, 100% { box-shadow: 0 0 0 2px var(--c-alarm), 0 0 22px 4px rgba(255,61,90,.55); } 50% { box-shadow: 0 0 0 3px var(--c-alarm), 0 0 34px 8px rgba(255,61,90,.75); } } @keyframes slideIn { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes sonarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes softBlink { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } /* "breathing" pulse for an unopened (NOWY) alert row — slow, subtle glow so it "hits the eyes" without being frantic (owner review 12.09, item 1a). */ @keyframes breathePulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 16px 2px var(--sev-color); } }