/* ═══════════════════════════════════════════════════════════════════════════════
   BRAND COLOR DESIGN SYSTEM (color-variable.css)
   Theme: Palamuru Grill (Smoky Rustic Bark & Fiery Ember Amber)
   ═══════════════════════════════════════════════════════════════════════════════
   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: #5A3F38;              /* Main brand color (HEX) - Rustic Charcoal Bark / Smoky Grill Earth */
    --brand-primary-rgb: 90, 63, 56;       /* Main brand color in R, G, B channels */
    
    --brand-primary-soft: #75534A;         /* Lighter / hover shade of rustic bark */
    --brand-primary-dark: #382520;         /* Deep shade for gradients */
    --brand-primary-deep: #1F1411;         /* Deepest shade for dark cards & footer */

    --brand-secondary: #DF892B;            /* Highlight / Accent color (HEX) - Fiery Grill Ember / Amber Flame */
    --brand-secondary-rgb: 223, 137, 43;   /* Accent color in R, G, B channels */
    --brand-secondary-light: #EAA14E;      /* Hover / lighter warm fire accent */


    /* ───────────────────────────────────────────────────────────────────────────
       2. SURFACES & BACKGROUNDS
       ─────────────────────────────────────────────────────────────────────────── */
    --bg-page: #FAF6F2;                    /* Body background (Warm Rustic Cream) */
    --bg-page-warm: #F3ECE4;               /* Sub-surface / warm soft cream alternate */
    --bg-white: #FFFFFF;                   /* Pure white container / card background */
    --bg-dark-surface: var(--brand-primary-deep); /* Dark card & footer surface */
    --hero-bg: #1F1411;                    /* Hero fallback background */


    /* ───────────────────────────────────────────────────────────────────────────
       3. TYPOGRAPHY & TEXT COLORS
       ─────────────────────────────────────────────────────────────────────────── */
    --text-primary: #1C1513;               /* Primary headings & dark body text */
    --text-secondary: #594843;             /* Subtitles and paragraph text */
    --text-muted: #8E7D77;                 /* Captions, labels, timestamps */
    --text-light: #FFFFFF;                 /* White text for dark sections */
    --text-on-accent: #FFFFFF;             /* White text contrast on amber flame buttons */


    /* ───────────────────────────────────────────────────────────────────────────
       4. COMPONENT & SECTION THEME SYSTEM
       ─────────────────────────────────────────────────────────────────────────── */
    /* Preloader */
    --preloader-bg: #61443E;               /* Clean white preloader background */
    --preloader-bar-track: rgba(255, 255, 255, 0.22);
    --preloader-bar-fill: var(--brand-secondary);

    /* Header & Navigation (Transparent Configuration) */
    --nav-text: rgba(255, 255, 255, 0.95);
    --nav-text-hover: var(--brand-secondary-light);
    --nav-indicator: var(--brand-secondary);
    --nav-bg: transparent;                                         /* Fully transparent header */
    --nav-border: transparent;                                     /* No border */
    --nav-bg-scrolled: rgba(31, 20, 17, 0.95);                     /* Frosted rustic charcoal on scroll */
    --nav-border-scrolled: rgba(var(--brand-secondary-rgb), 0.32); /* Subtle ember amber hairline border */
    --mobile-menu-bg: rgba(31, 20, 17, 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(31, 20, 17, 0.85);

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

    /* About Section Image Badge */
    --about-badge-bg: rgba(31, 20, 17, 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.25) 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: var(--brand-secondary);


    /* ───────────────────────────────────────────────────────────────────────────
       5. BORDERS & SHADOWS
       ─────────────────────────────────────────────────────────────────────────── */
    --border-subtle: rgba(var(--brand-primary-rgb), 0.14);
    --border-accent: rgba(var(--brand-secondary-rgb), 0.45);
    --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);
}

/* ───────────────────────────────────────────────────────────────────────────
   PRELOADER OVERRIDE
   ─────────────────────────────────────────────────────────────────────────── */
#preloader,
.preloader,
.site-preloader {
    background: #61443E !important;
    background-color: #61443E !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   EMPHASIS HEADINGS OVERRIDE
   ─────────────────────────────────────────────────────────────────────────── */
.section-title em,
h1 em,
h2 em,
h3 em {
    color: var(--brand-secondary) !important;
    background: none !important;
    -webkit-text-fill-color: var(--brand-secondary) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   ORDER BUTTON STYLES
   ─────────────────────────────────────────────────────────────────────────── */
.btn-primary,
.order-btn,
a.order-btn {
    background: var(--brand-secondary) !important;
    color: #FFFFFF !important;
    border: none !important;
}

.btn-primary:hover,
.order-btn:hover,
a.order-btn:hover {
    background: var(--brand-secondary-light) !important;
    color: #FFFFFF !important;
}

/* ==============================================================================
   OPTIONAL PRESET EXAMPLES (Copy & paste values into :root above for quick themes)
   ==============================================================================
   
   PRESET 1: Palamuru Grill (Smoky Rustic Bark & Fiery Ember Amber)
   --brand-primary: #5A3F38;
   --brand-primary-rgb: 90, 63, 56;
   --brand-primary-soft: #75534A;
   --brand-primary-dark: #382520;
   --brand-primary-deep: #1F1411;
   --brand-secondary: #DF892B;
   --brand-secondary-rgb: 223, 137, 43;
   --brand-secondary-light: #EAA14E;

   PRESET 2: Pandaga (Terracotta Rust & Traditional Gold)
   --brand-primary: #BD3404;
   --brand-primary-rgb: 189, 52, 4;
   --brand-primary-soft: #D64511;
   --brand-primary-dark: #8E2502;
   --brand-primary-deep: #1A0B06;
   --brand-secondary: #DDB140;
   --brand-secondary-rgb: 221, 177, 64;
   --brand-secondary-light: #ECC768;

   PRESET 3: Mangamma Mess (Heritage Jet Noir & Fiery Telugu Chilli Red)
   --brand-primary: #121010;
   --brand-primary-rgb: 18, 16, 16;
   --brand-primary-soft: #2B2525;
   --brand-primary-dark: #0A0808;
   --brand-primary-deep: #000000;
   --brand-secondary: #E81B23;
   --brand-secondary-rgb: 232, 27, 35;
   --brand-secondary-light: #FF4249;

   PRESET 4: Avocado & Brownies (Noir Espresso, Sunset Coral Orange & Soft Cream)
   --brand-primary: #12100E;
   --brand-primary-rgb: 18, 16, 14;
   --brand-primary-soft: #292420;
   --brand-primary-dark: #0A0908;
   --brand-primary-deep: #000000;
   --brand-secondary: #ff6d4d;
   --brand-secondary-rgb: 255, 109, 77;
   --brand-secondary-light: #ff8c73;
   --bg-page: #fff6ea;
   --bg-page-warm: #f7ead5;
   ============================================================================== */