/* ============================================================
   COLOR CONFIGURATION — Bare Crumbs
   Theme: Warm Brown · Soft Red Accent · Cream Canvas
   Adapted from The Bouganvilla template by Pusala Arun Kumar

   ✦ THIS is the ONLY file you change per restaurant.
   ✦ Paste your brand colors below and everything updates.
   ✦ 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;

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

  /* ────────────────────────────────────
     SHADOWS  (warm & earthy — bakery feel)
     ──────────────────────────────────── */
  --shadow-xs:     0 1px 4px  rgba(69, 34, 16, 0.08);
  --shadow-sm:     0 3px 14px rgba(69, 34, 16, 0.13);
  --shadow-md:     0 8px 32px rgba(69, 34, 16, 0.16);
  --shadow-lg:     0 20px 60px rgba(69, 34, 16, 0.20);
  --shadow-accent: 0 8px 36px rgba(255, 107, 107, 0.25);

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

  /* ── WARM BROWN FAMILY (dominant) ─────────────────────── */
  --brand-brown:         #452210;
  --brand-brown-mid:     #5c3320;
  --brand-brown-light:   #7a4a30;
  --brand-brown-pale:    #f0e0d0;
  --brand-brown-mist:    #faf3ec;
  --brand-brown-dark:    #2e1508;

  /* ── SOFT RED ACCENT ─────────────────── */
  --brand-accent:        #ff6b6b;
  --brand-accent-light:  #ff8f8f;
  --brand-accent-soft:   #ffb3b3;
  --brand-accent-pale:   #ffe8e8;
  --brand-accent-deep:   #d94444;
  --brand-accent-vivid:  #ff5252;

  /* ── WARM CREAM FAMILY (light surfaces) ─────────────────── */
  --brand-cream:         #f8f3eb;
  --brand-cream-light:   #fdf9f4;
  --brand-cream-deep:    #efe6d8;

  /* ────────────────────────────────────
     BACKGROUNDS
     ──────────────────────────────────── */
  --color-bg:        #fdf9f4;
  --color-bg-off:    #f8f3eb;
  --color-bg-cream:  #efe6d8;
  --color-bg-dark:   var(--brand-brown);
  --color-bg-darker: var(--brand-brown-dark);

  /* ────────────────────────────────────
     TEXT
     ──────────────────────────────────── */
  --color-text-ink:        #2e1508;
  --color-text-body:       #4a3228;
  --color-text-muted:      #8a6e5e;
  --color-text-faint:      #b8a090;

  /* Text on dark (brown) backgrounds */
  --color-text-on-dark:       #faf3ec;
  --color-text-on-dark-muted: rgba(250, 243, 236, 0.62);
  --color-text-on-dark-faint: rgba(250, 243, 236, 0.38);

  /* ────────────────────────────────────
     ACCENT COLORS
     ──────────────────────────────────── */
  --color-accent:                var(--brand-accent);
  --color-accent-deep:           var(--brand-accent-deep);
  --color-accent-dark:           var(--brand-brown);

  /* Red gradients — for CTA buttons, section highlights */
  --color-accent-gradient:       linear-gradient(135deg, #ff6b6b, #d94444);
  --color-accent-gradient-soft:  linear-gradient(135deg, #ffe8e8, #ffb3b3, #ff6b6b);
  --color-accent-gradient-rich:  linear-gradient(135deg, #d94444, #ff6b6b, #ff8f8f);

  /* Brown gradients — for dark sections, hero overlays */
  --color-green-gradient:        linear-gradient(135deg, #452210, #5c3320);
  --color-green-gradient-rich:   linear-gradient(160deg, #2e1508, #452210, #5c3320);

  /* Premium combo — brown to red (for special accents) */
  --color-brand-gradient:        linear-gradient(135deg, #452210, #d94444);

  /* ────────────────────────────────────
     BORDERS
     ──────────────────────────────────── */
  --color-border-light:   rgba(69, 34, 16, 0.10);
  --color-border:         rgba(69, 34, 16, 0.18);
  --color-border-strong:  rgba(69, 34, 16, 0.35);
  --color-border-accent:  rgba(255, 107, 107, 0.28);
  --color-border-cream:   rgba(180, 160, 138, 0.32);

  /* Borders on dark brown backgrounds */
  --color-border-on-dark: rgba(250, 243, 236, 0.15);

  /* ────────────────────────────────────
     HERO RADIAL GLOWS
     ──────────────────────────────────── */
  --color-hero-glow-1:  rgba(69, 34, 16, 0.07);
  --color-hero-glow-2:  rgba(255, 107, 107, 0.06);
  --color-grid-line:    rgba(69, 34, 16, 0.05);

  /* ────────────────────────────────────
     BADGE / OFFER BOX
     ──────────────────────────────────── */
  --color-badge-bg:       var(--brand-accent-pale);
  --color-badge-green:    var(--brand-brown-mist);

  /* ────────────────────────────────────
     PULSE RING  (hero badge dot)
     ──────────────────────────────────── */
  --color-pulse-ring: rgba(255, 107, 107, 0.28);

  /* ────────────────────────────────────
     INK (dark) SURFACES  (ribbon, CTA strip, promise, footer nav bar)
     ──────────────────────────────────── */
  --color-ink:        var(--brand-brown);
  --color-on-ink:     #faf3ec;
  --color-ink-mid:    var(--brand-brown-mid);

  /* ────────────────────────────────────
     INK SECTION GLOWS
     ──────────────────────────────────── */
  --color-ink-glow-1: rgba(255, 107, 107, 0.10);
  --color-ink-glow-2: rgba(250, 243, 236, 0.05);

  /* ────────────────────────────────────
     RIBBON
     ──────────────────────────────────── */
  --color-ribbon-border: rgba(250, 243, 236, 0.16);
  --color-ribbon-text:   rgba(250, 243, 236, 0.75);

  /* ────────────────────────────────────
     FOOTER
     ──────────────────────────────────── */
  --color-footer-bg: #2e1508;

}