/* ═══════════════════════════════════════════════════════════════════════════════
   BRAND COLOR DESIGN SYSTEM (color-variable.css)
   Theme: Briska Kitchen (Noir Luxe Black & Warm Antique Champagne Gold)
   ═══════════════════════════════════════════════════════════════════════════════
   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 (CLIENT PALETTE)
       ─────────────────────────────────────────────────────────────────────────── */
    --brand-primary: #171614;              /* Main brand color - Charcoal */
    --brand-primary-rgb: 23, 22, 20;       /* Charcoal in R, G, B channels */
    
    --brand-primary-soft: #2E2C28;         /* Lighter shade of charcoal */
    --brand-primary-dark: #0D0C0B;         /* Deepest charcoal shade */
    --brand-primary-deep: #171614;         /* Charcoal base for dark surfaces */

    --brand-secondary: #B69A6A;            /* Accent color - Muted Gold */
    --brand-secondary-rgb: 182, 154, 106;  /* Muted Gold in R, G, B channels */
    --brand-secondary-light: #C8AE7F;      /* Hover / lighter muted gold accent */


    /* ───────────────────────────────────────────────────────────────────────────
       2. SURFACES & BACKGROUNDS (CREAM DOMINANT CANVAS)
       ─────────────────────────────────────────────────────────────────────────── */
    --bg-page: #F0E5CF;                    /* Main background - Cream (#F0E5CF) */
    --bg-page-warm: #E6D9BE;               /* Sub-surface / slightly deeper cream */
    --bg-white: #FAF5EB;                   /* Pure soft cream card surface */
    --bg-dark-surface: var(--brand-primary-deep); /* Dark card & footer surface (Charcoal) */
    --hero-bg: #171614;                    /* Hero video fallback background */


    /* ───────────────────────────────────────────────────────────────────────────
       3. TYPOGRAPHY & TEXT COLORS (CHARCOAL TEXT)
       ─────────────────────────────────────────────────────────────────────────── */
    --text-primary: #171614;               /* Charcoal headings & primary text */
    --text-secondary: #2E2C28;             /* Deep charcoal subtitles & body paragraphs */
    --text-muted: #6E685E;                 /* Soft muted charcoal labels & timestamps */
    --text-light: #F0E5CF;                 /* Cream text for dark sections (footer/hero) */
    --text-on-accent: #171614;             /* High contrast charcoal text on golden buttons */


    /* ───────────────────────────────────────────────────────────────────────────
       4. COMPONENT & SECTION THEME SYSTEM
       ─────────────────────────────────────────────────────────────────────────── */
    /* Preloader */
    --preloader-bg: #171614;
    --preloader-bar-track: rgba(240, 229, 207, 0.15);
    --preloader-bar-fill: var(--brand-secondary);

    /* Header & Navigation */
    --nav-text: #F0E5CF;
    --nav-text-hover: var(--brand-secondary-light);
    --nav-indicator: var(--brand-secondary);
    --nav-bg: transparent;
    --nav-border: transparent;
    --nav-bg-scrolled: rgba(23, 22, 20, 0.96);       /* Frosted sleek charcoal on scroll */
    --nav-border-scrolled: rgba(182, 154, 106, 0.28); /* Subtle muted gold hairline border */
    --mobile-menu-bg: rgba(23, 22, 20, 0.98);

    /* Brand Logo Glow Effect */
    --logo-glow: drop-shadow(0 0 16px rgba(182, 154, 106, 0.35));

    /* Hero Section */
    --hero-title-color: #FFFFFF;
    --hero-overlay-bottom: rgba(23, 22, 20, 0.88);

    /* Menu & Delicacy Showcase Cards */
    --card-bg: #171614;
    --card-info-gradient: linear-gradient(
        to top, 
        rgba(23, 22, 20, 0.98) 0%, 
        rgba(23, 22, 20, 0.65) 65%, 
        transparent 100%
    );
    --card-tag-color: var(--brand-secondary);
    --gallery-progress-track: rgba(23, 22, 20, 0.12);
    --gallery-progress-bar: var(--brand-secondary);

    /* About Section Image Badge */
    --about-badge-bg: rgba(23, 22, 20, 0.92);
    --about-badge-border: rgba(182, 154, 106, 0.45);
    --about-badge-icon: var(--brand-secondary);

    /* CTA Section */
    --cta-gradient: linear-gradient(135deg, #24221F 0%, #171614 100%);
    --cta-radial-glow: radial-gradient(circle at center, rgba(182, 154, 106, 0.18) 0%, transparent 70%);

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

    /* Footer */
    --footer-bg: #171614;
    --footer-text: rgba(240, 229, 207, 0.85);
    --footer-text-muted: rgba(240, 229, 207, 0.55);
    --footer-icon-bg: rgba(240, 229, 207, 0.08);
    --footer-border: rgba(182, 154, 106, 0.18);

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


    /* ───────────────────────────────────────────────────────────────────────────
       5. BORDERS & SHADOWS
       ─────────────────────────────────────────────────────────────────────────── */
    --border-subtle: rgba(23, 22, 20, 0.12);
    --border-accent: rgba(182, 154, 106, 0.40);
    --shadow-sm: 0 4px 12px rgba(23, 22, 20, 0.05);
    --shadow-md: 0 8px 30px rgba(23, 22, 20, 0.08);
    --shadow-lg: 0 20px 60px rgba(23, 22, 20, 0.12);
    --shadow-accent-btn: 0 4px 15px rgba(182, 154, 106, 0.35);
    --shadow-accent-btn-hover: 0 6px 20px rgba(182, 154, 106, 0.50);
    --shadow-float-btn: 0 4px 12px rgba(23, 22, 20, 0.35);


    /* ───────────────────────────────────────────────────────────────────────────
       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);
    --charcoal: var(--brand-primary);
    --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: Briska Kitchen (Noir Luxe Black & Warm Antique Champagne Gold)
   --brand-primary: #111111;
   --brand-primary-rgb: 17, 17, 17;
   --brand-primary-soft: #262626;
   --brand-primary-dark: #080808;
   --brand-primary-deep: #000000;
   --brand-secondary: #C8A96E;
   --brand-secondary-rgb: 200, 169, 110;
   --brand-secondary-light: #DEC28E;

   PRESET 2: Café Ikigai (Deep Mulberry Wine & Sakura Blossom Pink)
   --brand-primary: #885354;
   --brand-primary-rgb: 136, 83, 84;
   --brand-primary-soft: #A3696A;
   --brand-primary-dark: #5C3233;
   --brand-primary-deep: #3A1B1C;
   --brand-secondary: #FAD4DC;
   --brand-secondary-rgb: 250, 212, 220;
   --brand-secondary-light: #FDE8ED;

   PRESET 3: 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 4: 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;
   ============================================================================== */