/* ========================================================================== CSS Custom Properties - Three-Tier Variable System ========================================================================== */ /* -------------------------------------------------------------------------- Tier 1: Color Scheme Definitions (5 themes) Applied via data-theme attribute on -------------------------------------------------------------------------- */ [data-theme="loxis"] { --accent-primary: #D4A843; --accent-primary-rgb: 212, 168, 67; --accent-secondary: #1A1A1A; --accent-secondary-rgb: 26, 26, 26; --accent-tertiary: #8B7536; --accent-tertiary-rgb: 139, 117, 54; } [data-theme="ocean"] { --accent-primary: #0077B6; --accent-primary-rgb: 0, 119, 182; --accent-secondary: #023E8A; --accent-secondary-rgb: 2, 62, 138; --accent-tertiary: #48CAE4; --accent-tertiary-rgb: 72, 202, 228; } [data-theme="forest"] { --accent-primary: #2D6A4F; --accent-primary-rgb: 45, 106, 79; --accent-secondary: #1B4332; --accent-secondary-rgb: 27, 67, 50; --accent-tertiary: #52B788; --accent-tertiary-rgb: 82, 183, 136; } [data-theme="sunset"] { --accent-primary: #E76F51; --accent-primary-rgb: 231, 111, 81; --accent-secondary: #264653; --accent-secondary-rgb: 38, 70, 83; --accent-tertiary: #F4A261; --accent-tertiary-rgb: 244, 162, 97; } [data-theme="royal"] { --accent-primary: #7B2CBF; --accent-primary-rgb: 123, 44, 191; --accent-secondary: #240046; --accent-secondary-rgb: 36, 0, 70; --accent-tertiary: #C77DFF; --accent-tertiary-rgb: 199, 125, 255; } /* -------------------------------------------------------------------------- Tier 2: Light/Dark Mode Semantics Applied via data-mode attribute on -------------------------------------------------------------------------- */ [data-mode="light"] { --bg-primary: #FFFFFF; --bg-secondary: #F8F9FA; --bg-tile: #FFFFFF; --bg-tile-hover: #F1F3F5; --bg-input: #FFFFFF; --text-primary: #212529; --text-secondary: #6C757D; --text-muted: #ADB5BD; --border-color: #DEE2E6; --border-color-light: #E9ECEF; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1); --sidebar-bg: #F8F9FA; --sidebar-text: #495057; --sidebar-active-bg: rgba(var(--accent-primary-rgb), 0.1); --header-bg: #FFFFFF; --header-border: #DEE2E6; --modal-bg: #FFFFFF; --modal-backdrop: rgba(0, 0, 0, 0.5); --table-stripe: rgba(0, 0, 0, 0.02); --table-hover: rgba(0, 0, 0, 0.04); --scrollbar-track: #F1F3F5; --scrollbar-thumb: #CED4DA; } [data-mode="dark"] { --bg-primary: #1A1A2E; --bg-secondary: #16213E; --bg-tile: #1F2937; --bg-tile-hover: #283548; --bg-input: #2D3748; --text-primary: #E5E7EB; --text-secondary: #9CA3AF; --text-muted: #6B7280; --border-color: #374151; --border-color-light: #2D3748; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4); --sidebar-bg: #16213E; --sidebar-text: #9CA3AF; --sidebar-active-bg: rgba(var(--accent-primary-rgb), 0.15); --header-bg: #1F2937; --header-border: #374151; --modal-bg: #1F2937; --modal-backdrop: rgba(0, 0, 0, 0.7); --table-stripe: rgba(255, 255, 255, 0.02); --table-hover: rgba(255, 255, 255, 0.05); --scrollbar-track: #1F2937; --scrollbar-thumb: #4B5563; } /* -------------------------------------------------------------------------- Tier 3: Semantic Colors (consistent across all themes) -------------------------------------------------------------------------- */ :root { /* Status badges */ --status-not-started: #6C757D; --status-not-started-bg: #E9ECEF; --status-not-started-text: #495057; --status-in-progress: #FFC107; --status-in-progress-bg: #FFF3CD; --status-in-progress-text: #664D03; --status-completed: #198754; --status-completed-bg: #D1E7DD; --status-completed-text: #0F5132; --status-ongoing: #0D6EFD; --status-ongoing-bg: #CFE2FF; --status-ongoing-text: #084298; /* Priority badges */ --priority-low: #198754; --priority-low-bg: #D1E7DD; --priority-low-text: #0F5132; --priority-medium: #FFC107; --priority-medium-bg: #FFF3CD; --priority-medium-text: #664D03; --priority-high: #DC3545; --priority-high-bg: #F8D7DA; --priority-high-text: #842029; /* Quote stage colors */ --closed-won: #198754; --closed-won-bg: #D1E7DD; --closed-lost: #DC3545; --closed-lost-bg: #F8D7DA; /* Alert/date styling */ --alert-warning-bg: #FFF3CD; --alert-warning-text: #664D03; --alert-warning-border: #FFECB5; --alert-error-bg: #F8D7DA; --alert-error-text: #842029; --alert-error-border: #F5C2C7; /* Comparison indicators */ --comparison-positive: #198754; --comparison-negative: #DC3545; /* ProScan status colors */ --proscan-needs-invitation: #DC3545; --proscan-invitation-sent: #FFC107; --proscan-awaiting-review: #0D6EFD; --proscan-up-to-date: #198754; /* Spacing scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* Border radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; /* Sidebar width */ --sidebar-width: 250px; --sidebar-collapsed-width: 0px; /* Header height */ --header-height: 56px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; }