/* ============================================
   Dharamshala Tours — Design Tokens
   Clean Minimal · Outfit · 3-Color Palette
   ============================================ */

:root {
  /* — Core Palette — */
  --black:    #1a1e18;
  --white:    #ffffff;
  --gray:     #f4f4f4;
  --gray-mid: #e0e0e0;
  --gray-dark: #999999;

  /* — Semantic Colors — */
  --bg:       var(--white);
  --bg-alt:   var(--gray);
  --bg-dark:  var(--black);
  --bg-card:  var(--white);

  --text:       var(--black);
  --text-soft:  #555555;
  --text-muted: #888888;
  --text-on-dark: var(--white);

  /* — Accent (WhatsApp only) — */
  --wa-green: #25D366;

  /* — Shadows — */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow:    0 2px 12px rgba(0,0,0,0.08);

  /* — Radius — */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 999px;

  /* — Spacing — */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  20px;
  --s6:  24px;
  --s7:  32px;
  --s8:  40px;
  --s9:  48px;
  --s10: 64px;
  --s11: 80px;
  --s12: 100px;

  /* — Typography — */
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  3.5rem;
  --fs-hero: 4rem;
  --fw-light:  300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* — Transitions — */
  --ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration: 0.2s;
  --duration-slow: 0.35s;

  /* — Layout — */
  --max-w:    1200px;
  --nav-h:    64px;
  --z-nav:    1000;
  --z-sticky: 900;
  --z-fab:    999;
  --z-modal:  2000;
}