/* ============================================ The Prep Table — Catering Site Theme Overrides ============================================ Applied when is set. Overrides the CSS variables defined in theme-core.css with a rich forest-green palette that visually distinguishes the corporate catering site from the retail site. Catering Palette: - Primary (Forest Green): Professional, fresh, culinary - Secondary (Warm Amber): Food warmth, approachable - AppBar: Deep Forest (dark green header) */ body.theme-catering { /* ==================== PRIMARY COLORS ==================== */ --primary: #2E7D32; /* Forest Green */ --primary-rgb: 46, 125, 50; --primary-light: #43A047; /* Hover states */ --primary-dark: #1B5E20; /* Active / dark backgrounds */ /* ==================== SECONDARY COLORS ==================== */ --secondary: #FF8F00; /* Warm Amber */ --secondary-rgb: 255, 143, 0; --secondary-light: #FFB300; /* Hover states */ --secondary-dark: #E65100; /* Active states */ /* ==================== ACCENT COLOR ==================== */ --accent: #2E7D32; --accent-rgb: 46, 125, 50; --accent-light: #43A047; --accent-dark: #1B5E20; /* ==================== BACKGROUNDS ==================== */ --background: #FFFFFF; --surface: #FFFFFF; --surface-hover: #F1F8F1; /* Light green tint on hover */ /* ==================== BORDERS ==================== */ --border: #C8E6C9; /* Light green border */ --border-light: #E8F5E9; --border-dark: #A5D6A7; /* ==================== TEXT COLORS ==================== */ --text-primary: #1A2B1A; /* Very dark green-tinted text */ --text-secondary: #4A5B4A; --text-disabled: #ADB5BD; --text-inverse: #FFFFFF; /* ==================== COMPONENT COLORS ==================== */ --button-primary: var(--primary); --button-primary-hover: var(--primary-light); --button-primary-active: var(--primary-dark); --button-primary-text: #FFFFFF; --link-color: var(--primary); --link-hover: var(--primary-light); /* Nav / header */ --nav-background: var(--primary-dark); --nav-text: #FFFFFF; --nav-hover: rgba(255, 255, 255, 0.15); --nav-active: rgba(255, 255, 255, 0.25); /* Cards */ --card-background: #FFFFFF; --card-border: var(--border); --card-shadow: 0 2px 8px rgba(46, 125, 50, 0.10); /* Inputs */ --input-background: #FFFFFF; --input-border: var(--border-dark); --input-focus-border: var(--primary); --input-placeholder: var(--text-disabled); /* ==================== SEMANTIC COLORS ==================== */ /* Keep same as retail — semantics shouldn't change */ --success: #28A745; --success-light: #6FD188; --success-dark: #1E7E34; --error: #DC3545; --error-light: #F1818E; --error-dark: #BD2130; --warning: #FFC107; --warning-light: #FFD659; --warning-dark: #E0A800; --info: #17A2B8; --info-light: #5DBECC; --info-dark: #117A8B; /* ==================== SHADOWS ==================== */ --shadow-sm: 0 2px 4px rgba(46, 125, 50, 0.08); --shadow-md: 0 4px 12px rgba(46, 125, 50, 0.12); --shadow-lg: 0 8px 24px rgba(46, 125, 50, 0.15); --shadow-xl: 0 20px 60px rgba(46, 125, 50, 0.25); }