/* ========================================================================== Theme Variables Central color definitions for light and dark themes MUST be loaded first before other stylesheets ========================================================================== */ /* ========================================================================== Light Mode (Default) ========================================================================== */ :root { color-scheme: light dark; /* === Brand Colors === */ --color-primary: #3BB9FF; --color-primary-hover: #1B82E6; --color-button: #349BFF; --color-button-hover: #1B82E6; /* === Accent System (Blue) === */ --color-accent-blue: #3BB9FF; --color-accent-blue-dark: #1B82E6; --color-accent-blue-bg: #E3F2FD; /* === Accent System (Green) === */ --color-accent-green: #a0bc47; --color-accent-green-dark: #568a02; --color-accent-green-bg: #f8fdf0; --color-accent-green-focus: rgba(160, 188, 71, 0.3); /* === Text Colors === */ --color-text-primary: #474747; --color-text-secondary: #777777; --color-text-muted: #888888; --color-text-inverted: white; /* === Typography Colors (Semantic) === */ --color-font-heading: var(--color-text-primary); --color-font-body: var(--color-text-primary); --color-font-caption: var(--color-text-muted); /* === Background Colors === */ --color-bg-primary: white; --color-bg-secondary: #f5f5f5; --color-bg-tertiary: #efefef; --color-bg-hover: #f2f2f2; --color-bg-input: white; /* === Border Colors === */ --color-border-light: #eee; --color-border-medium: #ddd; --color-border-dark: #ccc; /* === Navbar === */ --color-navbar-bg: #3BB9FF; --color-navbar-text: white; --color-navbar-hover: rgba(59, 185, 255, 0.5); /* === Footer === */ --color-footer-bg: #efefef; --color-footer-text: gray; /* === Status Colors === */ --color-success: #28a745; --color-success-hover: #218838; --color-success-bg: #E8F5E9; --color-success-text: #2E7D32; --color-warning: #ffc107; --color-warning-bg: #fff3cd; --color-warning-text: #856404; --color-danger: #dc3545; --color-danger-hover: #c82333; --color-danger-bg: #fff5f5; --color-danger-text: #C62828; --color-info: #17a2b8; /* === Primary Color Extended === */ --color-primary-bg: #E3F2FD; --color-primary-text: #1565C0; /* === Interactive Colors === */ --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-focus: rgba(0, 102, 255, 0.5); --color-selection: rgba(59, 185, 255, 0.3); --color-overlay: rgba(0, 0, 0, 0.5); /* === Shadows === */ --color-shadow-light: rgba(0, 0, 0, 0.1); --color-shadow-medium: rgba(0, 0, 0, 0.15); --color-shadow-dark: rgba(0, 0, 0, 0.25); /* === UI Components === */ --color-tooltip-bg: white; --color-tooltip-text: #333; --color-tooltip-border: #e0e0e0; /* === Pills/Badges === */ --color-pill-gray-bg: #f0f0f0; --color-pill-gray-text: #666; --color-pill-green-bg: #E8F5E9; --color-pill-green-text: var(--color-success); --color-pill-blue-bg: #E3F2FD; --color-pill-blue-text: var(--color-info); --color-pill-amber-bg: #FFF3E0; --color-pill-amber-text: #E65100; --color-pill-red-bg: #FFEBEE; --color-pill-red-text: var(--color-danger); /* === Progress Bar === */ --color-progress-bg: #e0e0e0; --color-progress-green: var(--color-success); --color-progress-blue: var(--color-info); --color-progress-orange: var(--color-warning); --color-progress-red: var(--color-danger); /* === Post-it Notes === */ --color-postit-bg: #ffffad; --color-postit-bg-hover: #ffff8d; --color-postit-text: #5a5a3a; /* === Spacing (shared across themes) === */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --touch-target-min: 44px; } /* ========================================================================== Dark Mode Applied via .dark-theme class on element ========================================================================== */ html.dark-theme { color-scheme: dark; /* === Brand Colors === */ --color-primary: #5CC9FF; --color-primary-hover: #3BB9FF; --color-button: #5CC9FF; --color-button-hover: #3BB9FF; /* === Accent System (Blue) === */ --color-accent-blue: #5CC9FF; --color-accent-blue-dark: #3BB9FF; --color-accent-blue-bg: #1a2a3a; /* === Accent System (Green) === */ --color-accent-green: #6a8a37; --color-accent-green-dark: #5a7a27; --color-accent-green-bg: #2a2a2a; --color-accent-green-focus: rgba(106, 138, 55, 0.3); /* === Text Colors === */ --color-text-primary: #e0e0e0; --color-text-secondary: #b0b0b0; --color-text-muted: #909090; --color-text-inverted: #1a1a1a; /* === Typography Colors === */ --color-font-heading: var(--color-text-primary); --color-font-body: var(--color-text-primary); --color-font-caption: var(--color-text-muted); /* === Background Colors === */ --color-bg-primary: #1a1a1a; --color-bg-secondary: #252525; --color-bg-tertiary: #2a2a2a; --color-bg-hover: #333333; --color-bg-input: #2a2a2a; /* === Border Colors === */ --color-border-light: #3a3a3a; --color-border-medium: #4a4a4a; --color-border-dark: #5a5a5a; /* === Navbar (VIBRANT - same as light) === */ --color-navbar-bg: #3BB9FF; --color-navbar-text: white; --color-navbar-hover: rgba(92, 201, 255, 0.5); /* === Footer === */ --color-footer-bg: #1a1a1a; --color-footer-text: #909090; /* === Status Colors (Brighter for dark backgrounds) === */ --color-success: #4ade80; --color-success-hover: #22c55e; --color-success-bg: #1a3a1a; --color-success-text: #4ade80; --color-warning: #fbbf24; --color-warning-bg: #3a2a1a; --color-warning-text: #fbbf24; --color-danger: #f87171; --color-danger-hover: #ef4444; --color-danger-bg: #3a1a1a; --color-danger-text: #f87171; --color-info: #38bdf8; /* === Primary Color Extended === */ --color-primary-bg: #1a2a3a; --color-primary-text: #5CC9FF; /* === Interactive Colors === */ --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-focus: rgba(77, 159, 255, 0.5); --color-selection: rgba(92, 201, 255, 0.3); --color-overlay: rgba(0, 0, 0, 0.7); /* === Shadows === */ --color-shadow-light: rgba(0, 0, 0, 0.3); --color-shadow-medium: rgba(0, 0, 0, 0.4); --color-shadow-dark: rgba(0, 0, 0, 0.5); /* === UI Components === */ --color-tooltip-bg: #2a2a2a; --color-tooltip-text: #e0e0e0; --color-tooltip-border: #4a4a4a; /* === Pills/Badges === */ --color-pill-gray-bg: #3a3a3a; --color-pill-gray-text: #b0b0b0; --color-pill-green-bg: #1a3a1a; --color-pill-green-text: var(--color-success); --color-pill-blue-bg: #1a2a3a; --color-pill-blue-text: var(--color-info); --color-pill-amber-bg: #3a2a1a; --color-pill-amber-text: var(--color-warning); --color-pill-red-bg: #3a1a1a; --color-pill-red-text: var(--color-danger); /* === Progress Bar === */ --color-progress-bg: #3a3a3a; --color-progress-green: var(--color-success); --color-progress-blue: var(--color-info); --color-progress-orange: var(--color-warning); --color-progress-red: var(--color-danger); /* === Post-it Notes (muted for dark mode) === */ --color-postit-bg: #4a4a3a; --color-postit-bg-hover: #5a5a4a; --color-postit-text: #d0d0b0; } /* ========================================================================== System Preference Detection (Auto Mode) Only applies when html has neither .light-theme nor .dark-theme class ========================================================================== */ @media (prefers-color-scheme: dark) { html:not(.light-theme):not(.dark-theme) { color-scheme: dark; /* === Brand Colors === */ --color-primary: #5CC9FF; --color-primary-hover: #3BB9FF; --color-button: #5CC9FF; --color-button-hover: #3BB9FF; /* === Accent System (Blue) === */ --color-accent-blue: #5CC9FF; --color-accent-blue-dark: #3BB9FF; --color-accent-blue-bg: #1a2a3a; /* === Accent System (Green) === */ --color-accent-green: #6a8a37; --color-accent-green-dark: #5a7a27; --color-accent-green-bg: #2a2a2a; --color-accent-green-focus: rgba(106, 138, 55, 0.3); /* === Text Colors === */ --color-text-primary: #e0e0e0; --color-text-secondary: #b0b0b0; --color-text-muted: #909090; --color-text-inverted: #1a1a1a; /* === Typography Colors === */ --color-font-heading: var(--color-text-primary); --color-font-body: var(--color-text-primary); --color-font-caption: var(--color-text-muted); /* === Background Colors === */ --color-bg-primary: #1a1a1a; --color-bg-secondary: #252525; --color-bg-tertiary: #2a2a2a; --color-bg-hover: #333333; --color-bg-input: #2a2a2a; /* === Border Colors === */ --color-border-light: #3a3a3a; --color-border-medium: #4a4a4a; --color-border-dark: #5a5a5a; /* === Navbar (VIBRANT - same as light) === */ --color-navbar-bg: #3BB9FF; --color-navbar-text: white; --color-navbar-hover: rgba(92, 201, 255, 0.5); /* === Footer === */ --color-footer-bg: #1a1a1a; --color-footer-text: #909090; /* === Status Colors === */ --color-success: #4ade80; --color-success-hover: #22c55e; --color-success-bg: #1a3a1a; --color-success-text: #4ade80; --color-warning: #fbbf24; --color-warning-bg: #3a2a1a; --color-warning-text: #fbbf24; --color-danger: #f87171; --color-danger-hover: #ef4444; --color-danger-bg: #3a1a1a; --color-danger-text: #f87171; --color-info: #38bdf8; /* === Primary Color Extended === */ --color-primary-bg: #1a2a3a; --color-primary-text: #5CC9FF; /* === Interactive Colors === */ --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-focus: rgba(77, 159, 255, 0.5); --color-selection: rgba(92, 201, 255, 0.3); --color-overlay: rgba(0, 0, 0, 0.7); /* === Shadows === */ --color-shadow-light: rgba(0, 0, 0, 0.3); --color-shadow-medium: rgba(0, 0, 0, 0.4); --color-shadow-dark: rgba(0, 0, 0, 0.5); /* === UI Components === */ --color-tooltip-bg: #2a2a2a; --color-tooltip-text: #e0e0e0; --color-tooltip-border: #4a4a4a; /* === Pills/Badges === */ --color-pill-gray-bg: #3a3a3a; --color-pill-gray-text: #b0b0b0; --color-pill-green-bg: #1a3a1a; --color-pill-green-text: var(--color-success); --color-pill-blue-bg: #1a2a3a; --color-pill-blue-text: var(--color-info); --color-pill-amber-bg: #3a2a1a; --color-pill-amber-text: var(--color-warning); --color-pill-red-bg: #3a1a1a; --color-pill-red-text: var(--color-danger); /* === Progress Bar === */ --color-progress-bg: #3a3a3a; --color-progress-green: var(--color-success); --color-progress-blue: var(--color-info); --color-progress-orange: var(--color-warning); --color-progress-red: var(--color-danger); /* === Post-it Notes (muted for dark mode) === */ --color-postit-bg: #4a4a3a; --color-postit-bg-hover: #5a5a4a; --color-postit-text: #d0d0b0; } }