/* ========================================================================== ClearPath Design System v2.0 - Design Tokens Light mode default, dark mode via data-theme="dark" on Brand Guide v2.0: Light = "Muted Retro", Dark = "Cool Steel" ========================================================================== */ /* ========================================================================== LIGHT MODE (Default) — "Muted Retro" Warm off-white background, white cards, muted teal + olive accents. ========================================================================== */ :root { /* Backgrounds */ --bg-primary: #F0EDEA; --bg-primary-rgb: 240, 237, 234; --bg-surface: #FFFFFF; --bg-surface-hover: #F7F5F3; --bg-elevated: #FAFAFA; --bg-inset: #EDE9E5; /* Text */ --text-primary: #2D3436; --text-primary-rgb: 45, 52, 54; --text-secondary: #636E72; --text-tertiary: #B2BEC3; --text-inverse: #FFFFFF; /* Brand Accents — muted for light backgrounds */ --accent-cyan: #4FA69D; --accent-cyan-rgb: 79, 166, 157; --accent-green: #7CB342; --accent-green-rgb: 124, 179, 66; --accent-cyan-dim: rgba(79, 166, 157, 0.7); --accent-green-dim: rgba(124, 179, 66, 0.7); /* Status Colors */ --status-not-started: #9CA3AF; --status-in-progress: #D97706; --status-review: #4FA69D; --status-complete: #7CB342; --status-error: #DC2626; --status-warning: #D97706; /* Borders */ --border-default: #E0DCD8; --border-hover: #C8C3BE; --border-focus: var(--accent-cyan); --border-subtle: #F0EDEA; /* Shadows & Glows — soft for light mode */ --glow-cyan: rgba(79, 166, 157, 0.08); --glow-cyan-strong: rgba(79, 166, 157, 0.15); --glow-green: rgba(124, 179, 66, 0.08); --glow-green-strong: rgba(124, 179, 66, 0.15); --shadow-pop: 4px 4px 0px 0px rgba(79, 166, 157, 0.5); --shadow-pop-hover: 6px 6px 0px 0px rgba(79, 166, 157, 0.6); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Logo filter: none for light mode (logo is dark by default) */ --logo-filter: none; /* ========================================================================== Spacing Scale (shared across themes) ========================================================================== */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 80px; --space-5xl: 120px; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; /* Z-Index Scale */ --z-base: 0; --z-elevated: 10; --z-dropdown: 100; --z-sticky: 500; --z-header: 1000; --z-modal: 2000; --z-toast: 3000; /* Layout */ --max-width-content: 700px; --max-width-container: 1200px; --header-height: 80px; /* Legacy Variables (backwards compatibility) */ --white: #FFFFFF; --charcoal: #222222; --deep-purple: #0F0036; --cyber-cyan: #4FA69D; --neon-lime: #7CB342; } /* ========================================================================== DARK MODE — "Cool Steel" Grey background with near-black tiles. Neon accents pop with high contrast. Activated by data-theme="dark" on the element. ========================================================================== */ html[data-theme="dark"] { /* Backgrounds */ --bg-primary: #555B63; --bg-primary-rgb: 85, 91, 99; --bg-surface: #1A1A1A; --bg-surface-hover: #252525; --bg-elevated: #1E1E1E; --bg-inset: #111111; /* Text */ --text-primary: #FFFFFF; --text-primary-rgb: 255, 255, 255; --text-secondary: #C0C0C0; --text-tertiary: #808080; --text-inverse: #000000; /* Brand Accents — neon for dark backgrounds */ --accent-cyan: #2FF3E0; --accent-cyan-rgb: 47, 243, 224; --accent-green: #9EFF1F; --accent-green-rgb: 158, 255, 31; --accent-cyan-dim: rgba(47, 243, 224, 0.7); --accent-green-dim: rgba(158, 255, 31, 0.7); /* Status Colors */ --status-not-started: #6B6B6B; --status-in-progress: #F59E0B; --status-review: #2FF3E0; --status-complete: #9EFF1F; --status-error: #EF4444; --status-warning: #F59E0B; /* Borders */ --border-default: #363B42; --border-hover: #464B52; --border-focus: var(--accent-cyan); --border-subtle: #1A1A1A; /* Shadows & Glows — neon cyan glow */ --glow-cyan: rgba(47, 243, 224, 0.15); --glow-cyan-strong: rgba(47, 243, 224, 0.25); --glow-green: rgba(158, 255, 31, 0.15); --glow-green-strong: rgba(158, 255, 31, 0.25); --shadow-pop: 4px 4px 0px 0px rgba(47, 243, 224, 0.8); --shadow-pop-hover: 6px 6px 0px 0px rgba(47, 243, 224, 0.9); --shadow-card: 0 0 20px var(--glow-cyan); --shadow-card-hover: 0 0 30px var(--glow-cyan-strong); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); /* Invert logo for dark backgrounds */ --logo-filter: brightness(0) invert(1); /* Legacy overrides */ --white: #FFFFFF; --charcoal: #222222; --deep-purple: #0F0036; --cyber-cyan: #2FF3E0; --neon-lime: #9EFF1F; } /* ========================================================================== OS PREFERENCE FALLBACK When no data-theme is set, respect the OS dark mode preference. This only applies if the user hasn't explicitly chosen a theme. ========================================================================== */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --bg-primary: #555B63; --bg-primary-rgb: 85, 91, 99; --bg-surface: #1A1A1A; --bg-surface-hover: #252525; --bg-elevated: #1E1E1E; --bg-inset: #111111; --text-primary: #FFFFFF; --text-primary-rgb: 255, 255, 255; --text-secondary: #C0C0C0; --text-tertiary: #808080; --text-inverse: #000000; --accent-cyan: #2FF3E0; --accent-cyan-rgb: 47, 243, 224; --accent-green: #9EFF1F; --accent-green-rgb: 158, 255, 31; --accent-cyan-dim: rgba(47, 243, 224, 0.7); --accent-green-dim: rgba(158, 255, 31, 0.7); --status-not-started: #6B6B6B; --status-in-progress: #F59E0B; --status-review: #2FF3E0; --status-complete: #9EFF1F; --status-error: #EF4444; --status-warning: #F59E0B; --border-default: #363B42; --border-hover: #464B52; --border-focus: var(--accent-cyan); --border-subtle: #1A1A1A; --glow-cyan: rgba(47, 243, 224, 0.15); --glow-cyan-strong: rgba(47, 243, 224, 0.25); --glow-green: rgba(158, 255, 31, 0.15); --glow-green-strong: rgba(158, 255, 31, 0.25); --shadow-pop: 4px 4px 0px 0px rgba(47, 243, 224, 0.8); --shadow-pop-hover: 6px 6px 0px 0px rgba(47, 243, 224, 0.9); --shadow-card: 0 0 20px var(--glow-cyan); --shadow-card-hover: 0 0 30px var(--glow-cyan-strong); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --logo-filter: brightness(0) invert(1); --white: #FFFFFF; --charcoal: #222222; --deep-purple: #0F0036; --cyber-cyan: #2FF3E0; --neon-lime: #9EFF1F; } } /* ========================================================================== SMOOTH THEME TRANSITION Applied when switching themes via the toggle button. ========================================================================== */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease, filter 0.3s ease !important; }