/* ═══════════════════════════════════════════════════════════════════════════════
   BRAND COLOR DESIGN SYSTEM (color-variable.css)
   Theme: Bruzi (Deep Forest Green & Warm Peach/Terracotta) - Based on brand poster
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ───────────────────────────────────────────────────────────────────────────
       1. CORE BRAND LOGO COLORS (EDIT THESE FOR NEW BRANDS)
       ─────────────────────────────────────────────────────────────────────────── */
    --brand-primary: #0A261C;             /* Main brand color (HEX) - Deep Forest Green[cite: 1] */
    --brand-primary-rgb: 10, 38, 28;      /* Main brand color in R, G, B channels[cite: 1] */
    
    --brand-primary-soft: #14382A;         /* Lighter / hover shade of deep green[cite: 1] */
    --brand-primary-dark: #071C14;         /* Deep shade for gradients[cite: 1] */
    --brand-primary-deep: #04120D;         /* Deepest shade for dark cards & footer[cite: 1] */

    --brand-secondary: #E8B49B;            /* Highlight / Accent color (HEX) - Warm Peach / Terracotta[cite: 1] */
    --brand-secondary-rgb: 232, 180, 155;  /* Accent color in R, G, B channels[cite: 1] */
    --brand-secondary-light: #F2C9B4;      /* Hover / lighter accent[cite: 1] */


    /* ───────────────────────────────────────────────────────────────────────────
       2. SURFACES & BACKGROUNDS
       ─────────────────────────────────────────────────────────────────────────── */
    --bg-page: #F5EFEB;                    /* Body background (Warm Sand Cream) */
    --bg-page-warm: #EADFD7;               /* Sub-surface / warm alternate cream */
    --bg-white: #FFFFFF;                   /* Pure white container / card background */
    --bg-dark-surface: var(--brand-primary-deep); /* Dark card & footer surface */
    --hero-bg: #04120D;                    /* Hero video fallback background */


    /* ───────────────────────────────────────────────────────────────────────────
       3. TYPOGRAPHY & TEXT COLORS
       ─────────────────────────────────────────────────────────────────────────── */
    --text-primary: #12221B;               /* Primary headings & dark body text */
    --text-secondary: #4A5D54;             /* Subtitles and paragraph text */
    --text-muted: #7E8C85;                 /* Captions, labels, timestamps */
    --text-light: #FFFFFF;                 /* White text for dark sections */
    --text-on-accent: #0A261C;             /* Dark text contrast on peach buttons */


    /* ───────────────────────────────────────────────────────────────────────────
       4. COMPONENT & SECTION THEME SYSTEM
       ─────────────────────────────────────────────────────────────────────────── */
    /* Preloader */
    --preloader-bg: var(--brand-primary);
    --preloader-bar-track: rgba(255, 255, 255, 0.15);
    --preloader-bar-fill: var(--brand-secondary);

    /* Header & Navigation */
    --nav-text: rgba(255, 255, 255, 0.95);
    --nav-text-hover: var(--brand-secondary-light);
    --nav-indicator: var(--brand-secondary);
    --nav-bg-scrolled: rgba(var(--brand-primary-rgb), 0.94);
    --nav-border-scrolled: rgba(var(--brand-secondary-rgb), 0.30);
    --mobile-menu-bg: rgba(var(--brand-primary-rgb), 0.98);

    /* Brand Logo Glow Effect */
    --logo-glow: drop-shadow(0 0 20px rgba(var(--brand-secondary-rgb), 0.45));

    /* Hero Section */
    --hero-title-color: #FFFFFF;
    --hero-overlay-bottom: rgba(var(--brand-primary-rgb), 0.80);

    /* Menu & Delicacy Showcase Cards */
    --card-bg: var(--brand-primary-deep);
    --card-info-gradient: linear-gradient(
        to top, 
        rgba(var(--brand-primary-rgb), 0.96) 0%, 
        rgba(var(--brand-primary-rgb), 0.65) 65%, 
        transparent 100%
    );
    --card-tag-color: var(--brand-secondary);
    --gallery-progress-track: rgba(var(--brand-primary-rgb), 0.12);
    --gallery-progress-bar: var(--brand-secondary);

    /* About Section Image Badge */
    --about-badge-bg: rgba(var(--brand-primary-rgb), 0.92);
    --about-badge-border: rgba(var(--brand-secondary-rgb), 0.45);
    --about-badge-icon: var(--brand-secondary);

    /* CTA Section */
    --cta-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    --cta-radial-glow: radial-gradient(circle at center, rgba(var(--brand-secondary-rgb), 0.22) 0%, transparent 70%);

    /* Direct Contact & Helpline Card */
    --contact-card-bg: var(--bg-white);
    --contact-card-border: var(--border-subtle);
    --contact-icon-bg: var(--brand-primary);
    --contact-icon-color: #FFFFFF;

    /* Footer */
    --footer-bg: var(--brand-primary-deep);
    --footer-text: rgba(255, 255, 255, 0.72);
    --footer-text-muted: rgba(255, 255, 255, 0.45);
    --footer-icon-bg: rgba(255, 255, 255, 0.08);
    --footer-border: rgba(255, 255, 255, 0.08);

    /* Star Ratings */
    --star-rating-color: var(--brand-secondary);


    /* ───────────────────────────────────────────────────────────────────────────
       5. BORDERS & SHADOWS
       ─────────────────────────────────────────────────────────────────────────── */
    --border-subtle: rgba(var(--brand-primary-rgb), 0.12);
    --border-accent: rgba(var(--brand-secondary-rgb), 0.40);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.14);
    --shadow-accent-btn: 0 4px 15px rgba(var(--brand-secondary-rgb), 0.35);
    --shadow-accent-btn-hover: 0 6px 20px rgba(var(--brand-secondary-rgb), 0.50);
    --shadow-float-btn: 0 4px 12px rgba(var(--brand-primary-rgb), 0.30);


    /* ───────────────────────────────────────────────────────────────────────────
       6. BACKWARD-COMPATIBILITY ALIASES
       ─────────────────────────────────────────────────────────────────────────── */
    --green: var(--brand-primary);
    --green-soft: var(--brand-primary-soft);
    --green-muted: rgba(var(--brand-primary-rgb), 0.08);
    --gold: var(--brand-secondary);
    --gold-light: var(--brand-secondary-light);
    --gold-glow: rgba(var(--brand-secondary-rgb), 0.22);
    --cream: var(--bg-page);
    --cream-warm: var(--bg-page-warm);
    --white: var(--bg-white);
    --text: var(--text-primary);
    --text-light: var(--text-secondary);
    --text-muted: var(--text-muted);
    --border: var(--border-subtle);
}