:root { /* ---------------------------------------------------- 1. Base Colors (Brand Identity) - Deep Violet Premium ---------------------------------------------------- */ /* Note: Primary colors are now defined in section 5 under Soft Pastel Palette for consistency */ --secondary-h: 200; --secondary-s: 90%; --secondary-l: 60%; --secondary-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)); --accent-h: 330; /* Pinkish/Magenta accent */ --accent-color: hsl(var(--accent-h), 85%, 60%); /* ---------------------------------------------------- 2. Semantic Colors (Soft/Pastel Backgrounds + Dark Text) For Order Statuses & Alerts ---------------------------------------------------- */ /* Success (Green) - More vivid */ --success-bg: #A7F3D0; /* Emerald 200 */ --success-text: #065F46; /* Emerald 800 */ --success-border: #6EE7B7; /* Emerald 300 */ /* Warning (Amber/Orange) - More vivid */ --warning-bg: #FDE68A; /* Amber 200 */ --warning-text: #92400E; /* Amber 800 */ --warning-border: #FCD34D; /* Amber 300 */ /* Danger (Red) - More vivid */ --danger-bg: #FECACA; /* Red 200 */ --danger-text: #991B1B; /* Red 800 */ --danger-border: #FCA5A5; /* Red 300 */ /* Info (Blue) - More vivid */ --info-bg: #BFDBFE; /* Blue 200 */ --info-text: #1E40AF; /* Blue 800 */ --info-border: #93C5FD; /* Blue 300 */ /* Waiting/Neutral (Gray) */ --neutral-bg: #F3F4F6; /* Gray 100 */ --neutral-text: #1F2937; /* Gray 800 */ --neutral-border: #E5E7EB; /* Gray 200 */ /* ---------------------------------------------------- 3. Layout & Surfaces (Glassmorphism Core) ---------------------------------------------------- */ --bg-body: #F8F9FA; /* Light Gray Body */ --bg-surface: rgba(255, 255, 255, 0.65); /* Glass Surface - More transparent */ --bg-surface-secondary: rgba(249, 250, 251, 0.6); --bg-surface-tertiary: #FFFFFF; /* Pure White for Inputs */ --blur-intensity: 16px; /* ---------------------------------------------------- 4. Typography ---------------------------------------------------- */ --font-primary: 'Alexandria', 'Cairo', 'Segoe UI', system-ui, sans-serif; --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --text-primary: #111827; /* Gray 900 */ --text-secondary: #4B5563; /* Gray 600 */ --text-muted: #9CA3AF; /* Gray 400 */ --text-inverse: #FFFFFF; /* ---------------------------------------------------- 5. Borders & Shadows (Depth System) ---------------------------------------------------- */ --border-color: rgba(229, 231, 235, 0.8); --border-focus: var(--primary-color); /* Soft Pastel Palette - Adjusted for "Premium" Look */ /* Primary: Soft Lavender/Violet */ --primary-h: 260; --primary-s: 70%; --primary-l: 80%; /* Softer, lighter */ --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); /* Re-defining primary derived colors using the new soft values */ --primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); --primary-hover: hsl(var(--primary-h), var(--primary-s), 70%); /* Slightly darker than 80% */ --primary-active: hsl(var(--primary-h), var(--primary-s), 60%); --primary-subtle: hsl(var(--primary-h), var(--primary-s), 96%); --primary-glass: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.15); /* Success: Soft Mint/Sage */ --success-h: 150; --success-s: 60%; --success-l: 85%; --success: hsl(var(--success-h), var(--success-s), var(--success-l)); /* Warning: Soft Peach/Apricot */ --warning-h: 35; --warning-s: 80%; --warning-l: 85%; --warning: hsl(var(--warning-h), var(--warning-s), var(--warning-l)); /* Danger: Soft Rose/Pink */ --danger-h: 0; --danger-s: 70%; --danger-l: 88%; --danger: hsl(var(--danger-h), var(--danger-s), var(--danger-l)); /* Info: Soft Sky Blue */ --info-h: 200; --info-s: 80%; --info-l: 85%; --info: hsl(var(--info-h), var(--info-s), var(--info-l)); /* Text Colors - High Contrast */ --text-primary: #1e293b; /* Dark Slate for Light Mode */ --text-secondary: #475569; --text-muted: #64748b; --text-inverse: #ffffff; /* Text on dark backgrounds */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* Glass Layers for Stacked Cards */ --bg-glass-layer-1: rgba(255, 255, 255, 0.2); --bg-glass-layer-2: rgba(255, 255, 255, 0.4); --bg-glass-layer-3: rgba(255, 255, 255, 0.6); --bg-action-panel: #e8e7e3; /* Shadows */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -2px rgba(0, 0, 0, 0.01); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02); --shadow-glow: 0 0 15px rgba(var(--primary-h), var(--primary-s), var(--primary-l), 0.3); /* ---------------------------------------------------- 6. Transitions ---------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 0.15s; --duration-normal: 0.3s; } /* ---------------------------------------------------- 8. Dark Mode Overrides ---------------------------------------------------- */ [data-bs-theme="dark"] { --primary-l: 70%; /* Lighter primary in dark mode for contrast */ --bg-body: #0F172A; /* Slate 900 - Deep Blue/Black */ --bg-surface: rgba(30, 41, 59, 0.75); /* Slate 800 Glass */ --bg-surface-secondary: rgba(51, 65, 85, 0.5); /* Slate 700 Glass */ --bg-surface-tertiary: #1E293B; /* Slate 800 Opaque */ --bg-glass-layer-1: rgba(0, 0, 0, 0.4); --bg-glass-layer-2: rgba(0, 0, 0, 0.6); --bg-glass-layer-3: rgba(0, 0, 0, 0.8); --bg-action-panel: #1e1e1e; --text-primary: #F8FAFC; /* Slate 50 */ --text-secondary: #CBD5E1; /* Slate 300 */ --text-muted: #64748B; /* Slate 500 */ --border-color: rgba(255, 255, 255, 0.1); /* Semantic Colors - Adjusted for Dark Mode (More vivid for visibility) */ --success-bg: rgba(16, 185, 129, 0.35); --success-text: #6EE7B7; --warning-bg: rgba(245, 158, 11, 0.35); --warning-text: #FCD34D; --danger-bg: rgba(239, 68, 68, 0.35); --danger-text: #FCA5A5; --info-bg: rgba(59, 130, 246, 0.35); --info-text: #93C5FD; --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.3); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4); }