/* ============================================================
   COLOR CONFIGURATION — Thandaa Garam Cafe
   Theme: Sky Blue ("THANDAA" Cold) · Warm Amber Gold ("GARAM" Hot) · Pure White
   
   ✦ Sky Blue (#0278B3) — "THANDAA" side (cold / refreshing beverages)
   ✦ Warm Amber Gold (#F5AE02) — "GARAM" side (hot / piping fresh snacks)
   ✦ Pure White (#ffffff) — Backgrounds & clean surfaces
   ============================================================ */

: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 (Warm & Cold Tinted)
     ──────────────────────────────────── */
  --shadow-xs:     0 1px 4px  rgba(0, 0, 0, 0.06);
  --shadow-sm:     0 3px 14px rgba(2, 120, 179, 0.12);
  --shadow-md:     0 8px 32px rgba(245, 174, 2, 0.15);
  --shadow-lg:     0 20px 60px rgba(1, 43, 66, 0.18);
  --shadow-accent: 0 8px 36px rgba(245, 174, 2, 0.35);

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

  /* ── SKY BLUE FAMILY ("THANDAA" / COLD SIDE) ── */
  --brand-blue:          #0278B3;   /* ← exact sky blue ("THANDAA" cold accent) */
  --brand-blue-mid:      #0391D7;   /* ← vivid mid sky blue                     */
  --brand-blue-light:    #3FAADF;   /* ← bright ice blue                        */
  --brand-blue-pale:     #E2F4FD;   /* ← ice blue tint                          */
  --brand-blue-mist:     #F0F9FE;   /* ← whisper sky blue                       */
  --brand-blue-dark:     #015078;   /* ← deep navy blue                         */

  /* ── WARM AMBER GOLD FAMILY ("GARAM" / HOT SIDE) ── */
  --brand-accent:        #F5AE02;   /* ← exact warm amber gold ("GARAM" hot)   */
  --brand-accent-light:  #FFC229;   /* ← warm bright amber                      */
  --brand-accent-soft:   #FFD566;   /* ← soft gold amber                        */
  --brand-accent-pale:   #FFF8E5;   /* ← faintest amber tint                    */
  --brand-accent-deep:   #C78D00;   /* ← deep antique gold (hover)              */
  --brand-accent-vivid:  #FFA000;   /* ← vivid amber gold pop                   */

  /* ── LEGACY ALIASES (FOR CORE CSS COMPATIBILITY) ── */
  --brand-brown:         #0278B3;   /* mapped to exact sky blue                 */
  --brand-brown-mid:     #0391D7;
  --brand-brown-light:   #3FAADF;
  --brand-brown-pale:    #E2F4FD;
  --brand-brown-mist:    #F0F9FE;
  --brand-brown-dark:    #012B42;

  --brand-terra:         #F5AE02;   /* mapped to exact warm amber gold          */
  --brand-terra-light:   #FFC229;
  --brand-terra-dark:    #C78D00;

  /* ── PURE WHITE & CREAM FAMILY ── */
  --brand-cream:         #ffffff;   /* pure white                               */
  --brand-cream-light:   #ffffff;   /* pure white                               */
  --brand-cream-deep:    #FAFCFF;   /* subtle cool white                        */

  /* ────────────────────────────────────
     BACKGROUNDS (Pure White dominant)
     ──────────────────────────────────── */
  --color-bg:        #ffffff;              /* pure white canvas                    */
  --color-bg-off:    #FAFCFF;              /* off-white sections                   */
  --color-bg-cream:  #F0F9FE;              /* whisper sky blue section bg          */

  /* ────────────────────────────────────
     TEXT
     ──────────────────────────────────── */
  --color-text-ink:   #012B42;             /* dark navy slate                      */
  --color-text-body:  #0C3B54;             /* navy slate body text                 */
  --color-text-muted: #33658A;             /* muted slate blue                     */
  --color-text-faint: #5E8CAE;             /* faint slate blue                     */

  /* Text on dark backgrounds */
  --color-text-on-dark:       #ffffff;     /* pure white on dark                   */
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.75);
  --color-text-on-dark-faint: rgba(255, 255, 255, 0.45);

  /* ────────────────────────────────────
     ACCENT COLORS
     ──────────────────────────────────── */
  --color-accent:                var(--brand-accent);
  --color-accent-deep:           var(--brand-accent-deep);
  --color-accent-dark:           #0278B3;  /* sky blue on light bg labels          */

  /* Warm Amber Gold gradients — CTA buttons, section highlights */
  --color-accent-gradient:       linear-gradient(135deg, #F5AE02, #FFC229);
  --color-accent-gradient-soft:  linear-gradient(135deg, #FFF8E5, #FFD566, #F5AE02);
  --color-accent-gradient-rich:  linear-gradient(135deg, #C78D00, #F5AE02, #FFC229);

  /* Deep Navy gradients — dark sections, hero overlays */
  --color-green-gradient:        linear-gradient(135deg, #012B42, #0C3B54);
  --color-green-gradient-rich:   linear-gradient(160deg, #012133, #012B42, #0C3B54);

  /* Thandaa Garam Combo — Sky Blue (#0278B3) to Warm Amber (#F5AE02) */
  --color-brand-gradient:        linear-gradient(135deg, #0278B3, #F5AE02);

  /* ────────────────────────────────────
     BORDERS
     ──────────────────────────────────── */
  --color-border-light:   rgba(2, 120, 179, 0.12);
  --color-border:         rgba(2, 120, 179, 0.24);
  --color-border-strong:  rgba(2, 120, 179, 0.48);
  --color-border-accent:  rgba(245, 174, 2, 0.40);
  --color-border-cream:   rgba(2, 120, 179, 0.12);

  /* Borders on dark backgrounds */
  --color-border-on-dark: rgba(245, 174, 2, 0.35);   /* warm amber gold border on navy */

  /* ────────────────────────────────────
     HERO RADIAL GLOWS
     ──────────────────────────────────── */
  --color-hero-glow-1:  rgba(245, 174, 2, 0.14);   /* warm amber glow             */
  --color-hero-glow-2:  rgba(2, 120, 179, 0.12);   /* sky blue glow               */
  --color-grid-line:    rgba(2, 120, 179, 0.05);

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

  /* ────────────────────────────────────
     PULSE RING (hero badge dot)
     ──────────────────────────────────── */
  --color-pulse-ring: rgba(245, 174, 2, 0.35);

  /* ────────────────────────────────────
     INK (dark) SURFACES (ribbon, CTA, promise, footer nav bar)
     ──────────────────────────────────── */
  --color-ink:        #012B42;             /* deep navy dark bg                    */
  --color-on-ink:     #ffffff;             /* pure white text on dark              */
  --color-ink-mid:    #0C3B54;             /* mid navy surface                     */

  /* ────────────────────────────────────
     INK SECTION GLOWS
     ──────────────────────────────────── */
  --color-ink-glow-1: rgba(245, 174, 2, 0.18);   /* warm amber gold shimmer       */
  --color-ink-glow-2: rgba(2, 120, 179, 0.12);   /* sky blue shimmer             */

  /* ────────────────────────────────────
     RIBBON
     ──────────────────────────────────── */
  --color-ribbon-border: rgba(245, 174, 2, 0.35);
  --color-ribbon-text:   rgba(255, 255, 255, 0.92);

  /* ────────────────────────────────────
     FOOTER
     ──────────────────────────────────── */
  --color-footer-bg: #012133;             /* darkest navy blue footer             */

}