/* ========================================
   KOLHU WALE — Design Tokens
   ======================================== */
:root {
  /* Brand colors (from logo) */
  --color-forest: #1b3022;
  --color-forest-deep: #122018;
  --color-forest-soft: #2a4533;
  --color-gold: #c9a227;
  --color-gold-light: #e0c15a;
  --color-gold-dark: #a8841a;

  /* Surfaces */
  --color-cream: #f7f3ea;
  --color-cream-dark: #efe8d8;
  --color-beige: #e8dfc8;
  --color-white: #ffffff;
  --color-off-white: #fbf9f4;
  --color-surface: #f3eee3;

  /* Text */
  --color-text: #1b3022;
  --color-text-muted: #5a6b5e;
  --color-text-light: #7a8a7e;
  --color-text-on-dark: #f7f3ea;
  --color-text-on-dark-muted: rgba(247, 243, 234, 0.72);

  /* Semantic */
  --color-success: #2d6a4f;
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1da851;
  --color-border: rgba(27, 48, 34, 0.12);
  --color-border-strong: rgba(27, 48, 34, 0.22);
  --color-overlay: rgba(18, 32, 24, 0.55);

  /* Typography */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --font-urdu-display: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
  --font-urdu: "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.75rem;
  --fs-5xl: 3.5rem;
  --fs-hero: clamp(2.25rem, 5vw, 3.75rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-urdu: 1.9;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container: 1180px;
  --container-narrow: 720px;
  --header-h: 80px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(27, 48, 34, 0.06);
  --shadow-md: 0 8px 24px rgba(27, 48, 34, 0.08);
  --shadow-lg: 0 16px 48px rgba(27, 48, 34, 0.12);
  --shadow-xl: 0 24px 64px rgba(27, 48, 34, 0.16);
  --shadow-product: 0 20px 40px rgba(27, 48, 34, 0.18);
  --shadow-gold: 0 8px 28px rgba(201, 162, 39, 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;

  /* Gradients */
  --grad-cream: linear-gradient(165deg, #fbf9f4 0%, #f7f3ea 45%, #efe8d8 100%);
  --grad-hero: linear-gradient(135deg, #fbf9f4 0%, #f3eee3 40%, #e8dfc8 100%);
  --grad-forest: linear-gradient(160deg, #1b3022 0%, #122018 100%);
  --grad-gold-line: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

@media (max-width: 768px) {
  :root {
    --header-h: 68px;
  }
}