/* ============================================ TOKENS - Dual Theme System (Light Mode by Default + Dark Mode Toggle) Standardized semantic CSS tokens for RoboGuard Robotics System ============================================ */ :root, [data-theme="light"] { /* ---- Canvas & Surfaces (Clean Modern Flat Robotics Light Mode) ---- */ --color-bg-canvas: #FFFFFF; /* Pure Crisp White Canvas */ --color-bg-primary: #FFFFFF; /* Pure White primary panels & header */ --color-bg-surface: #F8FAFC; /* Minimal soft surface, no heavy gray */ --color-bg-surface-elevated: #FFFFFF;/* High contrast card surface */ --color-bg-hover: #F1F5F9; /* Very subtle clean hover background */ --color-bg-dark: #020A06; /* Ultra-dark canvas preserved for video viewer & HUD */ --color-bg-glass: rgba(255, 255, 255, 0.96); /* ---- Borders (Minimal Flat Delimiters) ---- */ --color-border: #F1F5F9; /* Ultra-clean flat border, never heavy */ --color-border-subtle: #F8FAFC; /* Minimal subtle separator */ --color-border-glow: rgba(37, 99, 235, 0.20); /* FIX-A11Y (WCAG 1.4.11): borders that identify a FORM CONTROL must reach 3:1 against their surface. #8895A9 = 3.04:1 on #FFFFFF (the decorative --color-border above is only 1.10:1 and is kept for panel separators). */ --color-border-input: #8895A9; /* ---- Typography Colors ---- */ --color-text-primary: #0F172A; /* Slate 900 for high crisp readability (Contrast ~19:1) */ --color-text-secondary: #334155; /* Slate 700 for descriptions & subtext (Contrast ~9.5:1 on white, ~8.3:1 on surface) */ --color-text-muted: #64748B; /* Slate 500 for placeholders and labels (Contrast ~4.6:1 on white, meets WCAG AA 4.5:1) */ --color-icon-dark: #475569; /* Slate 600 for crisp icon readability */ --color-icon-hover: #0F172A; /* ---- Brand & Status Accents ---- */ --color-brand: #2563EB; /* Rich Royal Blue */ --color-brand-hover: #1D4ED8; --color-brand-glow: rgba(37, 99, 235, 0.3); --color-brand-light: #EFF6FF; --color-success: #16A34A; /* Emerald Green for online status */ --color-success-glow: rgba(22, 163, 74, 0.3); --color-danger: #DC2626; /* Crimson Red for alerts & stop */ --color-danger-glow: rgba(220, 38, 38, 0.3); --color-warning: #D97706; /* Amber for caution */ --color-warning-glow: rgba(217, 119, 6, 0.3); /* ---- Tactical Avionics & Combat HUD Tokens ---- */ --color-hud-green: #00FF66; /* High-intensity phosphor green collimator */ --color-hud-green-glow: rgba(0, 255, 102, 0.45); --color-hud-green-dim: rgba(0, 255, 102, 0.15); --color-hud-amber: #FFB000; /* Warning avionics amber */ --color-hud-cyan: #38BDF8; /* Visual servoing / tracker cyan */ --color-hud-red: #EF4444; /* Threat alert red */ --color-hud-bg-glass: rgba(2, 14, 8, 0.88); /* ---- Typography ---- */ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-size-xs: 0.6875rem; --font-size-sm: 0.8125rem; --font-size-md: 0.9375rem; --font-size-lg: 1.125rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ---- Spacing ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; /* ---- Border Radius ---- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-circle: 50%; /* ---- Dimensions & Z-Index ---- */ --sidebar-width: 320px; --header-height: 48px; --header-height-mobile: 62px; --mobile-nav-height: 54px; --joystick-size: 124px; --joystick-stick-size: 44px; --z-panel: 100; --z-overlay: 500; --z-modal: 1000; /* ---- Mobile Safe Area Support ---- */ --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); } /* ============================================ DARK TACTICAL THEME ([data-theme="dark"]) ============================================ */ [data-theme="dark"] { /* ---- Canvas & Surfaces ---- */ --color-bg-canvas: #070B14; /* Deep Void Canvas */ --color-bg-primary: #0B1120; /* Pure dark surface */ --color-bg-surface: #131D32; /* Elevated surface for cards, tiles */ --color-bg-surface-elevated: #1B2844;/* High-contrast card surface */ --color-bg-hover: #1E2E4E; /* Hover background */ --color-bg-dark: #020A06; /* Ultra-dark canvas */ --color-bg-glass: rgba(11, 17, 32, 0.94); /* ---- Borders (Flat & Subtle in Dark) ---- */ --color-border: rgba(255, 255, 255, 0.07); /* Clean non-intrusive border */ --color-border-subtle: rgba(255, 255, 255, 0.04); --color-border-glow: rgba(56, 189, 248, 0.25); /* FIX-A11Y (WCAG 1.4.11): 3.18:1 over the dark canvas #0B1120 for form controls. */ --color-border-input: rgba(255, 255, 255, 0.35); /* ---- Typography Colors ---- */ --color-text-primary: #F8FAFC; /* Crisp White (Contrast ~16:1 on #0F172A) */ --color-text-secondary: #CBD5E1; /* Slate 300 (Contrast ~11:1 on #0F172A, ~8.6:1 on #1E293B) */ --color-text-muted: #94A3B8; /* Slate 400 (Contrast ~6.4:1 on #0F172A, ~4.9:1 on #1E293B - WCAG AA compliant) */ --color-icon-dark: #94A3B8; --color-icon-hover: #F8FAFC; /* ---- Tactical Brand & Status Accents ---- */ --color-brand: #38BDF8; /* Cyan Blue */ --color-brand-hover: #0EA5E9; --color-brand-glow: rgba(56, 189, 248, 0.4); --color-brand-light: rgba(56, 189, 248, 0.15); --color-success: #00FF66; /* Phosphor Green */ --color-success-glow: rgba(0, 255, 102, 0.45); --color-danger: #EF4444; /* Crimson Red */ --color-danger-glow: rgba(239, 68, 68, 0.45); --color-warning: #FFB000; /* Aviation Amber */ --color-warning-glow: rgba(255, 176, 0, 0.45); /* Tactical HUD in Dark Theme */ --color-hud-green: #00FF66; --color-hud-green-glow: rgba(0, 255, 102, 0.55); --color-hud-green-dim: rgba(0, 255, 102, 0.18); --color-hud-amber: #FFB000; --color-hud-cyan: #38BDF8; --color-hud-red: #EF4444; --color-hud-bg-glass: rgba(2, 14, 8, 0.92); }