/** * NOC Command Center - Design System Tokens V2 (Light/Dark) * Version 2.2 - Light / Dark theme support * * - Default theme: Light * - Dark theme: enabled by setting `data-theme="dark"` on */ :root { /* =========================================== PRIMARY COLORS - Vibrant Teal =========================================== */ --primary: #0d9488; /* Teal 600 - Rich and visible */ --primary-hover: #0f766e; /* Teal 700 */ --primary-muted: rgba(13, 148, 136, 0.12); --primary-border: rgba(13, 148, 136, 0.3); /* =========================================== BACKGROUND COLORS - Light Theme =========================================== */ --bg-base: #f5f7fb; /* Light page background */ --bg-card: #ffffff; /* Card backgrounds */ --bg-card-translucent: rgba(255, 255, 255, 0.78); /* Translucent card background used for overlays / modals */ --bg-elevated: #f3f6fb; /* Elevated elements */ --bg-hover: #e2e8f0; /* Hover states */ --bg-input: #ffffff; /* Input backgrounds */ --bg-muted: rgba(0, 0, 0, 0.04); /* Subtle surfaces (overlays, cards, etc.) */ --bg-header: rgba(255, 255, 255, 0.82); /* Header / sticky navigation */ --bg-overlay: rgba(15, 23, 42, 0.55); /* Modals and overlays */ /* =========================================== BORDER COLORS =========================================== */ --border: rgba(15, 23, 42, 0.12); --border-light: rgba(15, 23, 42, 0.08); --border-hover: rgba(15, 23, 42, 0.2); --border-focus: var(--primary); /* =========================================== TEXT COLORS =========================================== */ --text-primary: #0f172a; /* Nearly black for headings */ --text-secondary: #475569; /* Dark slate for body text */ --text-muted: #64748b; /* Muted labels */ --text-disabled: #94a3b8; /* =========================================== SEMANTIC COLORS - High Visibility =========================================== */ --success: #10b981; /* Emerald 500 */ --success-muted: rgba(16, 185, 129, 0.15); --warning: #f59e0b; /* Amber 500 */ --warning-muted: rgba(245, 158, 11, 0.15); --error: #ef4444; /* Red 500 */ --error-muted: rgba(239, 68, 68, 0.15); --info: #0ea5e9; /* Sky 500 */ --info-muted: rgba(14, 165, 233, 0.15); /* =========================================== TERMINAL COLORS =========================================== */ --terminal-bg: #f8fafc; --terminal-text: #0f172a; --terminal-prompt: #6366f1; --terminal-success: #10b981; --terminal-error: #ef4444; --terminal-info: #0ea5e9; /* =========================================== TRANSITIONS =========================================== */ --transition-fast: 180ms ease; /* =========================================== SPACING =========================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* =========================================== BORDER RADIUS =========================================== */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* =========================================== SHADOWS (Clean Depth) =========================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.2); /* =========================================== LAYOUT =========================================== */ --sidebar-width: 260px; --header-height: 60px; /* =========================================== TYPOGRAPHY =========================================== */ --font-sans: 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; } html[data-theme="dark"] { /* =========================================== DARK THEME (Override values) =========================================== */ /* =========================================== PRIMARY COLORS - Vibrant Teal =========================================== */ --primary: #0d9488; --primary-hover: #0f766e; --primary-muted: rgba(13, 148, 136, 0.12); --primary-border: rgba(13, 148, 136, 0.3); /* =========================================== BACKGROUND COLORS - Dark Theme =========================================== */ --bg-base: #0b1120; --bg-card: #161e31; --bg-card-translucent: rgba(30, 41, 59, 0.75); --bg-elevated: #1e293b; --bg-hover: #2d3a54; --bg-input: #0f172a; --bg-muted: rgba(255, 255, 255, 0.05); --bg-header: rgba(30, 41, 59, 0.85); --bg-overlay: rgba(0, 0, 0, 0.65); /* =========================================== BORDER COLORS =========================================== */ --border: rgba(255, 255, 255, 0.08); --border-light: rgba(255, 255, 255, 0.12); --border-hover: rgba(255, 255, 255, 0.2); /* =========================================== TEXT COLORS - Brightened for Readability =========================================== */ --text-primary: #ffffff; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-disabled: #64748b; /* =========================================== TERMINAL COLORS =========================================== */ --terminal-bg: #030712; --terminal-text: #e2e8f0; --terminal-prompt: #a78bfa; --terminal-success: #34d399; --terminal-error: #fb7185; --terminal-info: #38bdf8; }