/* ============================================================
   COLOR CONFIGURATION — Peacock Restaurant
   Theme: Deep Teal · Rich Gold · Pure White
   Designed and Code written 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;
  --font-label:   'DM Sans', system-ui, sans-serif;

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

  /* ────────────────────────────────────
     SHADOWS  (teal-tinted, premium)
     ──────────────────────────────────── */
  --shadow-xs:     0 1px 4px  rgba(0, 0, 0, 0.07);
  --shadow-sm:     0 3px 14px rgba(31, 95, 105, 0.12);
  --shadow-md:     0 8px 32px rgba(31, 95, 105, 0.15);
  --shadow-lg:     0 20px 60px rgba(31, 95, 105, 0.18);
  --shadow-accent: 0 8px 36px rgba(210, 168, 60, 0.35);

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

  /* ── DEEP TEAL FAMILY (dominant dark — "PEACOCK" text, bird body) */
  --brand-brown:         #1F5F69;   /* ← deep teal (logo text + bird)       */
  --brand-brown-mid:     #2A7A86;   /* ← mid teal                           */
  --brand-brown-light:   #3A96A4;   /* ← lighter teal                       */
  --brand-brown-pale:    #DFF0F2;   /* ← barely-there teal tint             */
  --brand-brown-mist:    #F0F9FA;   /* ← whisper teal                       */
  --brand-brown-dark:    #133E46;   /* ← darkest teal (footer)              */

  /* ── RICH GOLD FAMILY (primary accent — flame, border, crown) ── */
  --brand-accent:        #D2A83C;   /* ← rich gold (flame outer, border)    */
  --brand-accent-light:  #E4C06A;   /* ← warm bright gold                   */
  --brand-accent-soft:   #EDD49A;   /* ← soft gold                          */
  --brand-accent-pale:   #FAF0D0;   /* ← faintest gold tint                 */
  --brand-accent-deep:   #A07820;   /* ← deep antique gold (hover)          */
  --brand-accent-vivid:  #DDB84A;   /* ← vivid gold pop (CTA hover)         */

  /* ── FLAME INNER (teal-gold overlap in logo) ─────────────── */
  --brand-terra:         #1F5F69;   /* ← same teal — inner flame / feathers */
  --brand-terra-light:   #2A7A86;   /* ← mid teal highlight                 */
  --brand-terra-dark:    #133E46;   /* ← darkest teal accent                */

  /* ── WARM WHITE FAMILY (light surfaces) ──────────────────── */
  --brand-cream:         #fdfbf5;   /* ← warm white (logo inner bg)         */
  --brand-cream-light:   #ffffff;   /* ← pure white                         */
  --brand-cream-deep:    #f5f0e4;   /* ← warm ivory sections                */

  /* ────────────────────────────────────
     BACKGROUNDS  (white dominant)
     ──────────────────────────────────── */
  --color-bg:        #ffffff;              /* pure white — main canvas       */
  --color-bg-off:    #fdfbf5;              /* warm white sections            */
  --color-bg-cream:  #f0f9fa;              /* whisper teal section bg        */

  /* ────────────────────────────────────
     TEXT
     ──────────────────────────────────── */
  --color-text-ink:   #0e2e34;             /* near-black, teal-dark          */
  --color-text-body:  #1f3e44;             /* dark teal body text            */
  --color-text-muted: #4a7a82;             /* muted teal-gray                */
  --color-text-faint: #88b0b5;             /* faint teal-gray                */

  /* Text on dark (teal) backgrounds */
  --color-text-on-dark:       #fdfbf5;     /* warm white on teal             */
  --color-text-on-dark-muted: rgba(253, 251, 245, 0.62);
  --color-text-on-dark-faint: rgba(253, 251, 245, 0.38);

  /* ────────────────────────────────────
     ACCENT COLORS
     ──────────────────────────────────── */
  --color-accent:                var(--brand-accent);
  --color-accent-deep:           var(--brand-accent-deep);
  --color-accent-dark:           #1F5F69;  /* teal used on light bg labels   */

  /* Gold gradients — CTA buttons, section highlights */
  --color-accent-gradient:       linear-gradient(135deg, #DDB84A, #D2A83C);
  --color-accent-gradient-soft:  linear-gradient(135deg, #FAF0D0, #EDD49A, #D2A83C);
  --color-accent-gradient-rich:  linear-gradient(135deg, #A07820, #D2A83C, #DDB84A);

  /* Teal gradients — dark sections, hero overlays */
  --color-green-gradient:        linear-gradient(135deg, #1F5F69, #2A7A86);
  --color-green-gradient-rich:   linear-gradient(160deg, #133E46, #1F5F69, #2A7A86);

  /* Premium combo — teal to gold (brand signature like the flame) */
  --color-brand-gradient:        linear-gradient(135deg, #1F5F69, #D2A83C);

  /* ────────────────────────────────────
     BORDERS
     ──────────────────────────────────── */
  --color-border-light:   rgba(31, 95, 105, 0.12);
  --color-border:         rgba(31, 95, 105, 0.25);
  --color-border-strong:  rgba(31, 95, 105, 0.48);
  --color-border-accent:  rgba(210, 168, 60, 0.35);
  --color-border-cream:   rgba(31, 95, 105, 0.12);

  /* Borders on dark teal backgrounds */
  --color-border-on-dark: rgba(210, 168, 60, 0.28);   /* gold border on teal */

  /* ────────────────────────────────────
     HERO RADIAL GLOWS
     ──────────────────────────────────── */
  --color-hero-glow-1:  rgba(210, 168, 60, 0.10);   /* gold glow            */
  --color-hero-glow-2:  rgba(31, 95, 105, 0.08);    /* teal glow            */
  --color-grid-line:    rgba(31, 95, 105, 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(210, 168, 60, 0.32);

  /* ────────────────────────────────────
     INK (dark) SURFACES  (ribbon, CTA, promise, footer nav bar)
     ──────────────────────────────────── */
  --color-ink:        #1F5F69;             /* deep teal dark bg              */
  --color-on-ink:     #fdfbf5;             /* warm white text on dark        */
  --color-ink-mid:    #2A7A86;             /* mid teal surface               */

  /* ────────────────────────────────────
     INK SECTION GLOWS
     ──────────────────────────────────── */
  --color-ink-glow-1: rgba(210, 168, 60, 0.14);   /* gold shimmer on teal   */
  --color-ink-glow-2: rgba(253, 251, 245, 0.05);

  /* ────────────────────────────────────
     RIBBON
     ──────────────────────────────────── */
  --color-ribbon-border: rgba(210, 168, 60, 0.28);
  --color-ribbon-text:   rgba(253, 251, 245, 0.82);

  /* ────────────────────────────────────
     FOOTER
     ──────────────────────────────────── */
  --color-footer-bg: #0e2e34;             /* darkest teal footer            */

}