/* ============================================================ THEME: Charcoal & Ember (Kosmos Eatery) Derived from the brand mark + the restaurant's own food photography. The Kosmos logo is pure black, so black carries the structure (headings, nav, footer) and the accent is an ember orange sampled from the dishes themselves (hue 27deg — 91% of the food photography sits in the red-to-orange band). All foreground/background pairs meet WCAG AA. Swap this file to change the entire visual appearance. DO NOT add layout, grid, flexbox, or spacing here. ONLY define CSS custom property tokens and decorative CSS. ============================================================ */ /* Load this theme's fonts in the HTML — NOT via @import */ :root { /* ===== BRAND COLORS ===== */ --gs-red: #a85919; /* Ember orange — primary brand (5.11:1 on white) */ --gs-red-dark: #7d400f; /* Deep ember (hover, pressed) — 8.04:1 on white */ --gs-red-light: rgba(168, 89, 25, 0.1); /* Ember tint (icon circles, hover fills) */ /* ===== UI COLORS ===== */ --gs-dark: #1a1a1a; /* Logo black: headings — 17.4:1 on white */ --gs-text: #333333; /* Body text */ --gs-text-light: #6b7280; /* Muted/secondary text, subtitles */ --gs-white: #ffffff; --gs-bg: #fafafa; /* Primary page background */ --gs-bg-alt: #f5f5f5; /* Alternate section background (FAQ, etc.) */ --gs-cream: #fdf8f3; /* Warm tone for card backgrounds */ --gs-border: #e5e7eb; /* Borders, dividers */ --gs-border-light: #f0f0f0; /* Very subtle borders (FAQ items) */ /* ===== SHADOWS ===== */ --gs-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --gs-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12); /* ===== TYPOGRAPHY ===== */ --gs-font-heading: 'Playfair Display', serif; --gs-font-body: 'Source Sans 3', sans-serif; --gs-heading-style: italic; --gs-heading-weight: 500; /* ===== HERO ===== */ --gs-hero-overlay: rgba(0, 0, 0, 0.55); /* Darkens background image */ /* ===== LAYOUT ===== */ --max-width: 1200px; /* ===== NAVBAR ===== */ --gs-nav-height: 120px; --gs-nav-height-mobile: 85px; --gs-nav-bg: #ffffff; /* Light nav — the black logo reads at 21:1 */ --gs-nav-open-bg: rgba(26, 26, 26, 0.96); /* Mobile nav open state (logo black) */ /* ===== BUTTONS ===== */ --gs-btn-radius: 4px; /* ===== FOOTER ===== */ --gs-footer-bg: #1f1f1f; --gs-footer-bar-bg: #2f2f2f; --gs-footer-text: #b9b9b9; /* ===== BRAND GLOW (shadow using primary color) ===== */ --gs-glow: rgba(168, 89, 25, 0.4); --gs-glow-dark: rgba(168, 89, 25, 0.5); --gs-glow-soft: rgba(168, 89, 25, 0.3); /* ===== DECORATIVE ===== */ --gs-star-color: #cc7818; /* Review/rating star amber — 3.35:1 on white */ --gs-faq-section-bg: #f5f5f5; /* FAQ outer section background */ --gs-faq-container-bg: #f8f8f8; /* FAQ inner container background */ /* ===== SEMANTIC ALIASES (shared gs- system tokens) ===== */ --gs-primary: #a85919; --gs-primary-dark: #7d400f; --gs-primary-light: rgba(168, 89, 25, 0.1); /* Bright gold — for highlights that sit ON DARK backgrounds (hero accent), where the ember tones above are too dark to read. 5.97:1 on the hero. */ --gs-accent: #e0a33e; --gs-accent-dark: #cc7818; --gs-accent-light: rgba(224, 163, 62, 0.15); /* ===== BACKWARD COMPATIBILITY ===== */ /* Old variable names still referenced in the legacy portion of style.css */ --primary-color: #a85919; --primary-color-light: #fdf6f0; --primary-color-dark: #7d400f; --text-dark: #1a1a1a; --text-light: #6b7280; --white: #ffffff; --main-color: #a85919; --bg-shade: #f5f5f5; }