/* ═══════════════════════════════════════════════════════════
   LUCKY INTERNATIONAL — DESIGN TOKENS
   Single source of truth. Import this first in every page.
═══════════════════════════════════════════════════════════ */

:root {

  /* ── Color: Hotel Core ── */
  --bg:            #F9F8F6;   /* Premium off-white canvas        */
  --fg:            #1A1A1A;   /* High-contrast charcoal          */
  --gold:          #D4AF37;   /* Accent: CTAs, active states     */
  --gold-dim:      rgba(212, 175, 55, 0.12);
  --gold-mid:      rgba(212, 175, 55, 0.4);

  /* ── Color: Dhaba Mini-Site Exclusive ── */
  --dgreen:        #59652A;   /* Organic nav & branding          */
  --dred:          #932533;   /* Spicy CTA accent                */
  --dcanvas:       #F5F0E6;   /* Earthy warm background          */
  --dgreen-dim:    rgba(89, 101, 42, 0.15);
  --dred-dim:      rgba(147, 37, 51, 0.12);

  /* ── Color: Utility ── */
  --white:         #FFFFFF;
  --black:         #000000;
  --divider:       #E6E4E0;
  --fg-70:         rgba(26, 26, 26, 0.70);
  --fg-50:         rgba(26, 26, 26, 0.50);
  --fg-30:         rgba(26, 26, 26, 0.30);
  --fg-10:         rgba(26, 26, 26, 0.08);
  --white-70:      rgba(255, 255, 255, 0.70);
  --white-50:      rgba(255, 255, 255, 0.50);
  --white-30:      rgba(255, 255, 255, 0.30);
  --white-10:      rgba(255, 255, 255, 0.10);

  /* ── Typography ── */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Inter', Arial, sans-serif;

  /* Desktop type scale */
  --fs-d1:   64px;
  --fs-h1:   40px;
  --fs-h2:   32px;
  --fs-h3:   24px;
  --fs-body: 16px;
  --fs-sm:   14px;
  --fs-xs:   12px;
  --fs-label: 11px;

  /* ── Spacing ── */
  --sp-4:    4px;
  --sp-8:    8px;
  --sp-12:   12px;
  --sp-16:   16px;
  --sp-24:   24px;
  --sp-32:   32px;
  --sp-48:   48px;
  --sp-64:   64px;
  --sp-80:   80px;
  --sp-120:  120px;

  /* ── Layout ── */
  --max-width:      1440px;
  --margin-desktop: 80px;
  --margin-mobile:  20px;
  --gutter:         24px;
  --gutter-mobile:  16px;

  /* ── Borders ── */
  --radius:    0px;   /* ABSOLUTE ZERO — enforced globally */
  --border:    1px solid var(--divider);

  /* ── Shadows ── */
  --shadow-card:       0 4px 20px rgba(26, 26, 26, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(26, 26, 26, 0.14);
  --shadow-dhaba:      0 4px 16px rgba(89, 101, 42, 0.15);

  /* ── Transitions ── */
  --transition-fast:   0.2s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;
  --transition-img:    filter 1500ms ease-in-out, transform 600ms ease;

  /* ── Z-index scale ── */
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-loader:  9999;
}

/* ── Mobile token overrides ── */
@media (max-width: 768px) {
  :root {
    --fs-d1:   36px;
    --fs-h1:   28px;
    --fs-h2:   24px;
    --fs-h3:   20px;
    --fs-body: 14px;
    --fs-sm:   13px;
  }
}