/* ═══════════════════════════════════════════════════════════════════════════════
   BRAND COLOR DESIGN SYSTEM (color-variable.css)
   Theme: 888 The Mandi Spot (Rich Roasted Brown & Golden Saffron)
   ═══════════════════════════════════════════════════════════════════════════════
   HOW TO USE FOR A NEW BRAND / LOGO:
   -------------------------------------------------------------------------------
   When you create a website for a new client or brand:
   1. Open the brand's logo image.
   2. Pick the PRIMARY color (e.g., Deep Brown, Navy Blue, Crimson Red, Forest Green).
   3. Pick the SECONDARY / ACCENT color (e.g., Golden Saffron, Amber, Vibrant Orange, Yellow).
   4. Update `--brand-primary` and `--brand-secondary` below (and their RGB channels).
   5. That's it! The entire site (Navbar, Hero, Delicacy Cards, Badges, Buttons, CTA,
      Helpline, Icons, Glows, Progress bars, and Footer) will automatically re-theme!
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ───────────────────────────────────────────────────────────────────────────
       1. CORE BRAND LOGO COLORS (EDIT THESE FOR NEW BRANDS)
       ─────────────────────────────────────────────────────────────────────────── */
    --brand-primary: #573D29;              /* Main brand color (HEX) - Roasted Mandi Brown */
    --brand-primary-rgb: 87, 61, 41;       /* Main brand color in R, G, B channels */
    
    --brand-primary-soft: #735237;         /* Lighter / hover shade of brown */
    --brand-primary-dark: #3B281B;         /* Deep shade for gradients */
    --brand-primary-deep: #241810;         /* Deepest shade for dark cards & footer */

    --brand-secondary: #F7BA15;            /* Highlight / Accent color (HEX) - Warm Golden Saffron */
    --brand-secondary-rgb: 247, 186, 21;   /* Accent color in R, G, B channels */
    --brand-secondary-light: #FFCF4D;      /* Hover / lighter golden accent */


    /* ───────────────────────────────────────────────────────────────────────────
       2. SURFACES & BACKGROUNDS
       ─────────────────────────────────────────────────────────────────────────── */
    --bg-page: #FAF6F0;                    /* Body background (Warm Ivory Cream) */
    --bg-page-warm: #F3ECE1;               /* 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: #241810;                    /* Hero video fallback background */


    /* ───────────────────────────────────────────────────────────────────────────
       3. TYPOGRAPHY & TEXT COLORS
       ─────────────────────────────────────────────────────────────────────────── */
    --text-primary: #231C18;               /* Primary headings & dark body text */
    --text-secondary: #5E524A;             /* Subtitles and paragraph text */
    --text-muted: #91857C;                 /* Captions, labels, timestamps */
    --text-light: #FFFFFF;                 /* White text for dark sections */
    --text-on-accent: var(--brand-primary);/* Dark contrast text on golden 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.78);

    /* 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
       (Maintains full compatibility with existing theme classes)
       ─────────────────────────────────────────────────────────────────────────── */
    --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);
}

/* ==============================================================================
   OPTIONAL PRESET EXAMPLES (Copy & paste values into :root above for quick themes)
   ==============================================================================
   
   PRESET 1: 888 The Mandi Spot (Rich Roasted Brown & Golden Saffron)
   --brand-primary: #573D29;
   --brand-primary-rgb: 87, 61, 41;
   --brand-primary-soft: #735237;
   --brand-primary-dark: #3B281B;
   --brand-primary-deep: #241810;
   --brand-secondary: #F7BA15;
   --brand-secondary-rgb: 247, 186, 21;
   --brand-secondary-light: #FFCF4D;

   PRESET 2: Mírame Cafe & Kitchen (Modern Slate Charcoal & Soft Warm Champagne)
   --brand-primary: #3A3F45;
   --brand-primary-rgb: 58, 63, 69;
   --brand-primary-soft: #50565E;
   --brand-primary-dark: #272B30;
   --brand-primary-deep: #1A1D20;
   --brand-secondary: #E3E5BE;
   --brand-secondary-rgb: 227, 229, 190;
   --brand-secondary-light: #F2F4D8;

   PRESET 3: Biryani Factory (Smoky Charcoal & Fiery Tandoori Orange)
   --brand-primary: #1F1915;
   --brand-primary-rgb: 31, 25, 21;
   --brand-primary-soft: #382E27;
   --brand-primary-dark: #14100D;
   --brand-primary-deep: #0C0A08;
   --brand-secondary: #E87521;
   --brand-secondary-rgb: 232, 117, 33;
   --brand-secondary-light: #FF9447;

   PRESET 4: Polam Gattu Biryani (Deep Emerald & Warm Mustard Gold)
   --brand-primary: #072814;
   --brand-primary-rgb: 7, 40, 20;
   --brand-primary-soft: #124024;
   --brand-primary-dark: #04180C;
   --brand-primary-deep: #020F07;
   --brand-secondary: #E5B83B;
   --brand-secondary-rgb: 229, 184, 59;
   --brand-secondary-light: #F7CB55;
   ============================================================================== */