/* ═══════════════════════════════════════════════════════════════════════════════
   BRAND COLOR DESIGN SYSTEM (color-variable.css)
   Theme: Café Ikigai (Deep Mulberry Wine & Sakura Blossom Pink)
   ═══════════════════════════════════════════════════════════════════════════════
   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: #885354;              /* Main brand color (HEX) - Deep Mulberry / Wine Chestnut */
    --brand-primary-rgb: 136, 83, 84;      /* Main brand color in R, G, B channels */
    
    --brand-primary-soft: #A3696A;         /* Lighter / hover shade of mulberry */
    --brand-primary-dark: #5C3233;         /* Deep shade for gradients */
    --brand-primary-deep: #3A1B1C;         /* Deepest shade for dark cards & footer */

    --brand-secondary: #FAD4DC;            /* Highlight / Accent color (HEX) - Soft Sakura Pink */
    --brand-secondary-rgb: 250, 212, 220;  /* Accent color in R, G, B channels */
    --brand-secondary-light: #FDE8ED;      /* Hover / lighter blossom accent */


    /* ───────────────────────────────────────────────────────────────────────────
       2. SURFACES & BACKGROUNDS
       ─────────────────────────────────────────────────────────────────────────── */
    --bg-page: #FCF9FA;                    /* Body background (Clean Soft Blossom Mist) */
    --bg-page-warm: #F7EFF2;               /* Sub-surface / warm alternate petal cream */
    --bg-white: #FFFFFF;                   /* Pure white container / card background */
    --bg-dark-surface: var(--brand-primary-deep); /* Dark card & footer surface */
    --hero-bg: #3A1B1C;                    /* Hero video fallback background */


    /* ───────────────────────────────────────────────────────────────────────────
       3. TYPOGRAPHY & TEXT COLORS
       ─────────────────────────────────────────────────────────────────────────── */
    --text-primary: #2C1819;               /* Primary headings & dark espresso-wine body text */
    --text-secondary: #6B5254;             /* Subtitles and paragraph text */
    --text-muted: #9E8385;                 /* Captions, labels, timestamps */
    --text-light: #FFFFFF;                 /* White text for dark sections */
    --text-on-accent: var(--brand-primary-dark); /* Dark contrast text on pink accent 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 - Transparent Frosted Glass Design */
    --nav-text: rgba(255, 255, 255, 0.90);
    --nav-text-hover: #FFFFFF;
    --nav-indicator: var(--brand-secondary);
    --nav-bg-scrolled: rgba(36, 18, 20, 0.72);
    --nav-border-scrolled: rgba(var(--brand-secondary-rgb), 0.22);
    --mobile-menu-bg: rgba(28, 13, 15, 0.88);

    /* 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.75);
    --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: #D98880;          /* Warm rose star rating */


    /* ───────────────────────────────────────────────────────────────────────────
       5. BORDERS & SHADOWS
       ─────────────────────────────────────────────────────────────────────────── */
    --border-subtle: rgba(var(--brand-primary-rgb), 0.12);
    --border-accent: rgba(var(--brand-secondary-rgb), 0.50);
    --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-primary-rgb), 0.25);
    --shadow-accent-btn-hover: 0 6px 20px rgba(var(--brand-primary-rgb), 0.35);
    --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: 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 2: Bruzi (Deep Roasted Espresso & Warm Terracotta Peach)
   --brand-primary: #301210;
   --brand-primary-rgb: 48, 18, 16;
   --brand-primary-soft: #4D211E;
   --brand-primary-dark: #200B0A;
   --brand-primary-deep: #140706;
   --brand-secondary: #C78865;
   --brand-secondary-rgb: 199, 136, 101;
   --brand-secondary-light: #DE9E7B;

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