/* ============================================================ Waffle Zone — Global Design Tokens Single source of truth for all theme colors ============================================================ */ :root { /* ── Brand palette (from logo) ── */ --brand-purple: #9B26B6; --brand-purple-rgb: 155, 38, 182; --brand-purple-dark: #7B1FA2; --brand-purple-dark-rgb: 123, 31, 162; --brand-purple-light: #CE93D8; --brand-purple-light-rgb: 206, 147, 216; --brand-purple-pale: #F3E5F5; --brand-purple-pale-rgb: 243, 229, 245; --brand-black: #121212; --brand-black-rgb: 18, 18, 18; --footer-bg: #141418; --footer-bg-deep: #0a0a0d; --footer-bg-rgb: 20, 20, 24; --brand-white: #FFFFFF; --brand-white-rgb: 255, 255, 255; --brand-gold: #FFC107; --brand-gold-rgb: 255, 193, 7; --brand-orange: #FF9800; --brand-orange-rgb: 255, 152, 0; --brand-red: #E53935; --brand-red-rgb: 229, 57, 53; --brand-purple-vivid: #AB47BC; --brand-purple-vivid-rgb: 171, 71, 188; /* ── Semantic theme (used across legacy + new CSS) ── */ --theme-primary-rgb: var(--brand-purple-rgb); --theme-secondary-rgb: var(--brand-black-rgb); --theme-accent-rgb: var(--brand-gold-rgb); --primary-color: rgb(var(--theme-primary-rgb)); --primary-color-rgb: var(--brand-purple-rgb); --primary-transparent: rgba(var(--brand-purple-rgb), 0.4); --primary-hover: var(--brand-purple-dark); --secondary-color: rgb(var(--brand-orange-rgb)); --secondary-light: var(--brand-purple-light); --accent-color: rgb(var(--brand-gold-rgb)); /* ── Surfaces ── */ --cream: var(--brand-purple-pale); --cream-dark: #EDE7F6; --section-bg-color: #FEFBFF; --light-color: var(--cream); --white: var(--brand-white); --surface-white: var(--brand-white); /* ── Text ── */ --dark-color: var(--brand-black); --text-dark: var(--brand-black); --text-color: #6A5A72; --text-muted: #8B7A94; --text-on-primary: var(--brand-white); --text-on-dark: var(--brand-white); /* ── Borders ── */ --border-color: #E8D5F0; --border-light: #F0E6F8; --border-strong: var(--brand-black); /* ── Status ── */ --discount-color: var(--brand-red); --danger-color: var(--brand-red); --buying-option-color: #7E57C2; /* ── Mega menu category accent rotation ── */ --mega-accent-1: rgb(var(--brand-purple-rgb)); --mega-accent-2: rgb(var(--brand-orange-rgb)); --mega-accent-3: rgb(var(--brand-gold-rgb)); --mega-accent-4: rgb(var(--brand-red-rgb)); --mega-accent-5: var(--brand-purple-dark); --mega-accent-6: var(--brand-purple-vivid); /* ── Typography ── */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; /* ── Effects ── */ --transition: all 0.25s ease; --shadow-sm: 0 4px 20px rgba(var(--brand-black-rgb), 0.08); --shadow-md: 0 12px 32px rgba(var(--brand-purple-rgb), 0.15); --shadow-lg: 0 20px 56px rgba(var(--brand-black-rgb), 0.14); --box-shadow: var(--shadow-sm); --box-shadow-hover: 0 10px 28px rgba(var(--brand-purple-rgb), 0.2); /* ── Gradients ── */ --gradient-brand: linear-gradient(135deg, rgb(var(--brand-purple-dark-rgb)), rgb(var(--brand-purple-rgb))); --gradient-brand-warm: linear-gradient(135deg, rgb(var(--brand-purple-rgb)), rgb(var(--brand-orange-rgb))); --gradient-accent: linear-gradient(135deg, rgb(var(--brand-gold-rgb)), rgb(var(--brand-orange-rgb))); --gradient-hero-overlay: linear-gradient(105deg, rgba(var(--brand-black-rgb), 0.55) 0%, rgba(var(--brand-black-rgb), 0.2) 45%, transparent 70%); --gradient-topstrip: linear-gradient(90deg, rgb(var(--brand-purple-dark-rgb)), rgb(var(--brand-purple-rgb))); --gradient-scrolling: linear-gradient(90deg, rgba(var(--brand-purple-dark-rgb), 0.95), rgba(var(--brand-purple-rgb), 0.9)); --gradient-body: linear-gradient(180deg, var(--cream) 0%, var(--section-bg-color) 30%, var(--white) 100%); --gradient-section-header: linear-gradient(135deg, rgba(var(--theme-secondary-rgb), 1) 0%, rgba(var(--theme-primary-rgb), 1) 55%, rgba(var(--theme-accent-rgb), 0.95) 100%); --gradient-story: linear-gradient( 168deg, rgb(var(--brand-purple-dark-rgb)) 0%, rgb(var(--brand-purple-rgb)) 38%, var(--footer-bg) 82%, var(--footer-bg) 100% ); --gradient-footer: linear-gradient(180deg, var(--footer-bg) 0%, var(--footer-bg-deep) 100%); --gradient-cta: linear-gradient(135deg, rgb(var(--brand-purple-dark-rgb)), rgb(var(--brand-gold-rgb))); --gradient-button: linear-gradient(135deg, rgb(var(--theme-secondary-rgb)), rgb(var(--theme-primary-rgb))); --gradient-navbar-border: linear-gradient(90deg, rgba(var(--brand-purple-dark-rgb), 0.85) 0%, rgba(var(--brand-purple-rgb), 1) 25%, rgba(var(--brand-gold-rgb), 0.95) 50%, rgba(var(--brand-purple-rgb), 1) 75%, rgba(var(--brand-purple-dark-rgb), 0.85) 100%); /* ── Overlay shadows ── */ --shadow-overlay-sm: rgba(var(--brand-black-rgb), 0.2); --shadow-overlay-md: rgba(var(--brand-black-rgb), 0.25); --shadow-overlay-lg: rgba(var(--brand-black-rgb), 0.3); --shadow-menu: rgba(var(--brand-black-rgb), 0.1); --shadow-badge: rgba(var(--brand-red-rgb), 0.35); --shadow-hero-text: rgba(var(--brand-black-rgb), 0.3); /* ── Order Now CTA (soft purple shades) ── */ --btn-order-text: var(--brand-white); --btn-order-gradient: linear-gradient( 135deg, rgba(var(--brand-purple-light-rgb), 0.72) 0%, rgb(var(--brand-purple-rgb)) 42%, rgb(var(--brand-purple-vivid-rgb)) 78%, rgba(var(--brand-purple-dark-rgb), 0.88) 100% ); --btn-order-gradient-hover: linear-gradient( 135deg, rgb(var(--brand-purple-vivid-rgb)) 0%, rgb(var(--brand-purple-rgb)) 38%, rgba(var(--brand-gold-rgb), 0.82) 100% ); --btn-order-shadow: 0 4px 18px rgba(var(--brand-purple-rgb), 0.2); --btn-order-shadow-hover: 0 10px 30px rgba(var(--brand-purple-rgb), 0.26), 0 0 0 1px rgba(var(--brand-purple-light-rgb), 0.45), 0 0 24px rgba(var(--brand-gold-rgb), 0.18); --btn-order-ease: cubic-bezier(0.34, 1.25, 0.64, 1); /* Fixed header offset — overridden responsively in food-navbar.css */ --food-header-offset: 111px; --food-header-offset-mobile: 68px; }