/* ============================================================
   COLOR CONFIGURATION — 4M Biryani House · Since 1997
   Theme: Warm White / Beige dominant · Cool Light Green accents
   Designed and Code written by Pusala Arun Kumar

   ✦ THIS is the ONLY file you change per restaurant.
   ✦ Load this BEFORE restaurant-core.css in your HTML.
   ============================================================ */

:root {

  /* ────────────────────────────────────
     TYPOGRAPHY
     ──────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-label:   'DM Sans', system-ui, sans-serif;

  /* ────────────────────────────────────
     LAYOUT TOKENS
     ──────────────────────────────────── */
  --nav-h:      76px;
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ────────────────────────────────────
     SHADOWS  (soft, warm-neutral)
     ──────────────────────────────────── */
  --shadow-xs:     0 1px 4px  rgba(30, 50, 35, 0.06);
  --shadow-sm:     0 3px 14px rgba(30, 50, 35, 0.08);
  --shadow-md:     0 8px 32px rgba(30, 50, 35, 0.10);
  --shadow-lg:     0 20px 60px rgba(30, 50, 35, 0.12);
  --shadow-accent: 0 6px 24px rgba(46, 125, 90, 0.14);

  /* ════════════════════════════════════
     ★  BRAND PALETTE  ★
     ════════════════════════════════════ */

  /* ── RED / ACCENT ALTERNATIVE (re-tuned to cool green accents) ─── */
  --brand-red:        #2E7D5A;   /* ← mapped to cool green for buttons/badges */
  --brand-red-mid:    #388E65;   /* ← slightly brighter cool green */
  --brand-red-light:  #52A882;   /* ← lighter tint hover */
  --brand-red-pale:   #EAF5F0;   /* ← barely-there cool mint blush */
  --brand-red-mist:   #F2F9F5;   /* ← whisper cool mint tint */
  --brand-red-dark:   #1B4D35;   /* ← deepest cool green (footer/CTA) */

  /* ── GREEN (cool light green family) ─────── */
  --brand-green:      #3B9E70;   /* ← cool light green accent */
  --brand-green-mid:  #48AB7D;   /* ← slightly richer cool light green */
  --brand-green-pale: #E4F5EE;   /* ← faint cool light green tint */
  --brand-green-deep: #2A7352;   /* ← deep cool green for hover states */
  --brand-green-dark: #163B2B;   /* ← darkest cool forest */

  /* ── WARM WHITE / BEIGE FAMILY  (dominant — 70%+ of page) ── */
  --brand-beige:        #FAF7F2;   /* ← main page background, warm white */
  --brand-beige-light:  #FFFFFF;   /* ← pure white cards & panels */
  --brand-beige-mid:    #F3EDE3;   /* ← alternating section background */
  --brand-beige-deep:   #EBE3D5;   /* ← deeper beige section bg */
  --brand-beige-border: #DDD5C4;   /* ← warm beige borders */

  /* ────────────────────────────────────
     BACKGROUNDS  (beige / warm white dominant)
     ──────────────────────────────────── */
  --color-bg:         #FFFFFF;          /* pure white — hero, cards */
  --color-bg-off:     #FAF7F2;          /* warm beige — alternating sections */
  --color-bg-cream:   #F3EDE3;          /* deeper warm beige */

  /* ────────────────────────────────────
     TEXT  (warm dark — not cold black)
     ──────────────────────────────────── */
  --color-text-ink:   #1C1410;         /* warm near-black headings */
  --color-text-body:  #3A2E24;         /* warm dark brown body */
  --color-text-muted: #7A6A58;         /* warm mid-brown muted */
  --color-text-faint: #AFA090;         /* warm faint for labels */

  /* Text on dark backgrounds */
  --color-text-on-dark:       #FAF7F2;
  --color-text-on-dark-muted: rgba(250, 247, 242, 0.65);
  --color-text-on-dark-faint: rgba(250, 247, 242, 0.38);

  /* ────────────────────────────────────
     ACCENT COLORS
     ─────────────────────────────────────
     Cool Light Green = section labels, icons, underlines, buttons, badges
     ──────────────────────────────────── */
  --color-accent:          var(--brand-green);      /* nav underline, section labels */
  --color-accent-deep:     var(--brand-green-deep); /* hover darken */
  --color-accent-dark:     var(--brand-red-dark);   /* deep cool green on light bg */

  /* Cool green gradients */
  --color-accent-gradient:        linear-gradient(135deg, #2A7352, #3B9E70);
  --color-accent-gradient-soft:   linear-gradient(135deg, #E4F5EE, #48AB7D);
  --color-accent-gradient-rich:   linear-gradient(135deg, #163B2B, #2A7352, #3B9E70);

  --color-green-gradient:         linear-gradient(135deg, #1B4D35, #2E7D5A);
  --color-green-gradient-rich:    linear-gradient(160deg, #113322, #1B4D35, #2E7D5A);

  --color-brand-gradient:         linear-gradient(135deg, #2E7D5A, #3B9E70);

  /* ────────────────────────────────────
     BORDERS  (warm beige dominant, not colored)
     ──────────────────────────────────── */
  --color-border-light:  rgba(180, 160, 130, 0.18);  /* default card borders */
  --color-border:        rgba(180, 160, 130, 0.35);  /* stronger beige border */
  --color-border-strong: rgba(180, 160, 130, 0.55);
  --color-border-accent: rgba(59, 158, 112, 0.25);    /* cool green accent border */
  --color-border-cream:  rgba(180, 160, 130, 0.15);

  /* On dark sections */
  --color-border-on-dark: rgba(250, 247, 242, 0.18);

  /* ────────────────────────────────────
     HERO RADIAL GLOWS  (very soft, cool green warmth)
     ──────────────────────────────────── */
  --color-hero-glow-1:  rgba(59, 158, 112, 0.07);    /* faint cool green glow */
  --color-hero-glow-2:  rgba(42, 115, 82, 0.05);     /* secondary cool green */
  --color-grid-line:    rgba(180, 160, 130, 0.08);   /* warm beige grid */

  /* ────────────────────────────────────
     BADGE / OFFER BOX  (warm beige)
     ──────────────────────────────────── */
  --color-badge-bg:    #F3EDE3;         /* beige badge background */
  --color-badge-green: var(--brand-green-pale);

  /* ────────────────────────────────────
     PULSE RING  (hero badge dot)
     ──────────────────────────────────── */
  --color-pulse-ring: rgba(59, 158, 112, 0.25);

  /* ────────────────────────────────────
     INK (dark) SURFACES
     ──────────────────────────────────── */
  --color-ink:     #2A1F18;            /* warm dark brown — promise section */
  --color-on-ink:  #FAF7F2;            /* warm white on dark */
  --color-ink-mid: #3A2E24;            /* mid warm dark */

  /* ────────────────────────────────────
     INK SECTION GLOWS
     ──────────────────────────────────── */
  --color-ink-glow-1: rgba(59, 158, 112, 0.12);   /* faint cool green on dark */
  --color-ink-glow-2: rgba(42, 115, 82, 0.08);    /* secondary cool green on dark */

  /* ────────────────────────────────────
     RIBBON  (cool light green tone)
     ──────────────────────────────────── */
  --color-ribbon-border: rgba(250, 247, 242, 0.14);
  --color-ribbon-text:   rgba(250, 247, 242, 0.85);

  /* ────────────────────────────────────
     FOOTER  (warm charcoal)
     ──────────────────────────────────── */
  --color-footer-bg: #1C1410;          /* warm near-black — calm, premium */

}


/* ════════════════════════════════════════════════════════════
   SECTION OVERRIDES
   Ribbon, CTA, and Nav actions flipped to cool light green.
   ════════════════════════════════════════════════════════════ */

/* Navbar CTA button → cool light green */
.btn-nav-order {
  background: var(--brand-red) !important;
}
.btn-nav-order::before {
  background: linear-gradient(135deg, #1B4D35, #2E7D5A) !important;
}

/* Ribbon → cool light green */
.ribbon {
  background: var(--brand-red) !important;
  border-top-color:      rgba(250, 247, 242, 0.12) !important;
  border-bottom-color: rgba(250, 247, 242, 0.12) !important;
}

/* CTA section → deep cool green */
.cta-section {
  background: var(--brand-red-dark) !important;
}