/* =============================================================
   DASTARKHAN DELIGHTS — Design Tokens
   Single source of truth for all CSS custom properties.
   ============================================================= */

:root {
  /* ---- Color Palette ---- */
  --saffron:        #E8963A;
  --saffron-light:  #F5B96E;
  --saffron-pale:   #FDF3E3;
  --saffron-dark:   #C97A25;
  --forest:         #1E4A2D;
  --forest-mid:     #2D6B42;
  --forest-light:   #E8F2EC;
  --forest-deep:    #142F1D;
  --cream:          #FAF6EF;
  --warm-white:     #FFFDF8;
  --charcoal:       #2C2C2C;
  --muted:          #7A7060;
  --gold-border:    #C8973A;
  --error:          #C0392B;
  --error-light:    #FDECEA;
  --success:        #1E6B3A;
  --success-light:  #E8F5ED;
  --whatsapp:       #25D366;
  --whatsapp-dark:  #128C7E;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Nunito', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Font Sizes (fluid) ---- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */
  --text-7xl:  4.5rem;    /* 72px */

  /* ---- Spacing (8px grid) ---- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* ---- Border Radius ---- */
  --radius-pill:   999px;
  --radius-card:   12px;
  --radius-card-lg: 16px;
  --radius-button: 8px;
  --radius-input:  8px;
  --radius-badge:  6px;
  --radius-circle: 50%;

  /* ---- Shadows ---- */
  --shadow-soft:    0 2px 12px rgba(30, 74, 45, 0.08);
  --shadow-card:    0 4px 24px rgba(30, 74, 45, 0.12);
  --shadow-lifted:  0 8px 40px rgba(30, 74, 45, 0.18);
  --shadow-saffron: 0 4px 20px rgba(232, 150, 58, 0.35);
  --shadow-dark:    0 4px 24px rgba(0, 0, 0, 0.25);
  --shadow-inset:   inset 0 2px 8px rgba(30, 74, 45, 0.08);

  /* ---- Z-Index Layers ---- */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;

  /* ---- Transitions ---- */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.25s ease;
  --transition-slow:   all 0.4s ease;
  --transition-spring: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ---- */
  --max-width:      1280px;
  --nav-height:     72px;
  --sidebar-width:  260px;
  --container-pad:  clamp(1rem, 4vw, 2rem);
}

/* ---- Dark section overrides ---- */
[data-theme="dark"] {
  --bg-primary:   var(--forest-deep);
  --text-primary: var(--warm-white);
}