/* ============================================
   BAGECHA BY ADI'S — Design Tokens
   Where Quality Meets Elegance
   ============================================ */

:root {
  /* ─── Colors ─── */
  --primary: #364C11;
  --primary-light: #4A6618;
  --primary-dark: #2A3C0D;
  --bg: #F8F7F2;
  --surface: #FFFFFF;
  --accent-gold: #C9A227;
  --accent-gold-light: rgba(201, 162, 39, 0.15);
  --accent-gold-muted: rgba(201, 162, 39, 0.25);
  --text-primary: #1E1E1E;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --success: #4CAF50;
  --error: #D32F2F;
  --error-light: rgba(211, 47, 47, 0.08);
  --backdrop: rgba(54, 76, 17, 0.6);

  /* ─── Spacing (8pt grid) ─── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --screen-padding: 20px;
  --card-padding: 24px;

  /* ─── Typography ─── */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-hero: 32px;
  --text-title: 24px;
  --text-lg: 18px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-caption: 13px;
  --text-xs: 11px;

  --leading-tight: 1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ─── Borders & Radii ─── */
  --radius-card: 24px;
  --radius-btn: 16px;
  --radius-input: 14px;
  --radius-badge: 100px;
  --radius-dot: 50%;
  --radius-modal: 20px;

  /* ─── Shadows ─── */
  --shadow-card: 0 10px 30px rgba(54, 76, 17, 0.08);
  --shadow-card-hover: 0 16px 40px rgba(54, 76, 17, 0.12);
  --shadow-btn: 0 4px 16px rgba(54, 76, 17, 0.15);
  --shadow-btn-pressed: 0 2px 8px rgba(54, 76, 17, 0.1);
  --shadow-nav: 0 -4px 24px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 24px 64px rgba(54, 76, 17, 0.2);

  /* ─── Gradients ─── */
  --gradient-primary: radial-gradient(circle at center, #4A6618 0%, #364C11 60%, #1F2C0B 100%);
  --gradient-reward: linear-gradient(135deg, #364C11 0%, #4A6618 100%);
  --gradient-gold: linear-gradient(135deg, #EAD385 0%, #C9A227 50%, #A6831B 100%);
  --gradient-gold-text: linear-gradient(90deg, #F9F2CD 0%, #EAD385 50%, #C9A227 100%);
  --gradient-gold-glow: radial-gradient(ellipse at top right, rgba(201, 162, 39, 0.15) 0%, transparent 60%);
  --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);

  /* ─── Transitions ─── */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast: 120ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-splash: 700ms;

  /* ─── Z-Index Scale ─── */
  --z-base: 1;
  --z-nav: 100;
  --z-modal-backdrop: 200;
  --z-modal: 300;
  --z-confetti: 400;
  --z-toast: 500;
}