/* ============================================================
   DEHLEEZ FLAVOURS — Design Tokens
   Heritage Indian masala brand · Since 1942
   Implementation-agnostic CSS variables for a WordPress
   Storefront child theme.
   ============================================================ */

:root {
  /* ---- Brand core (locked names from brief) ---- */
  --primary-red: #A41E22;
  --deep-red:    #8E1A1D;
  --cream:       #FBF3E2;
  --gold:        #C9A24B;
  --charcoal:    #2B2B2B;

  /* ---- Red ramp ---- */
  --red-800: #6F1416;
  --red-700: #8E1A1D;   /* deep-red */
  --red-600: #A41E22;   /* primary-red */
  --red-500: #B8413F;
  --red-300: #D98B86;
  --red-100: #F3DAD6;

  /* ---- Gold ramp ---- */
  --gold-700: #9C7A2E;
  --gold-600: #B98E38;
  --gold-500: #C9A24B;  /* gold */
  --gold-400: #D7B96E;
  --gold-300: #E4CF98;
  --gold-100: #F2E6C8;

  /* ---- Cream / neutral ramp ---- */
  --cream-50:  #FFFCF5;
  --cream-100: #FBF3E2;  /* cream — page bg */
  --cream-200: #F4E8CF;  /* surface alt */
  --cream-300: #EADab8;  /* hairline on cream */
  --cream-400: #DEC9A0;

  /* ---- Charcoal / ink ramp ---- */
  --ink-900: #1E1D1B;
  --ink-800: #2B2B2B;   /* charcoal — body */
  --ink-600: #524C45;   /* muted text */
  --ink-400: #837B70;   /* caption / placeholder */
  --ink-200: #BBB2A4;

  /* ---- Veg / signal greens (from pack mark) ---- */
  --veg-green: #1E8A3C;
  --veg-green-dark: #176E30;

  /* ---- Semantic roles ---- */
  --bg:            var(--cream-100);
  --bg-warm:       var(--cream-50);
  --surface:       #FFFFFF;
  --surface-alt:   var(--cream-200);
  --surface-deep:  var(--deep-red);

  --text:          var(--ink-800);
  --text-muted:    var(--ink-600);
  --text-soft:     var(--ink-400);
  --text-inverse:  var(--cream-50);
  --text-onred:    var(--cream-100);

  --border:        var(--cream-300);
  --border-strong: var(--cream-400);
  --border-onred:  rgba(251,243,226,0.28);

  --brand:         var(--primary-red);
  --brand-deep:    var(--deep-red);
  --accent:        var(--gold-500);
  --accent-deep:   var(--gold-600);

  --success:       var(--veg-green);
  --error:         #C0392B;
  --sale:          #B8413F;

  /* ---- Typography ---- */
  --font-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  /* fluid display sizes (desktop-first, clamp for responsive) */
  --fs-display:  clamp(44px, 5.6vw, 76px);  /* hero H1 */
  --fs-h1:       clamp(38px, 4.4vw, 56px);
  --fs-h2:       clamp(30px, 3.2vw, 40px);
  --fs-h3:       clamp(24px, 2.4vw, 30px);
  --fs-h4:       22px;
  --fs-lead:     19px;   /* lead paragraph */
  --fs-body:     17px;
  --fs-sm:       15px;
  --fs-cap:      13px;   /* caption / eyebrow */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.6;

  --tracking-eyebrow: 0.22em;
  --tracking-caps:    0.08em;
  --tracking-tight:  -0.01em;

  --weight-reg: 400;
  --weight-med: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Radius (restrained, heritage) ---- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Elevation (warm-tinted, soft) ---- */
  --shadow-sm: 0 1px 2px rgba(63,30,12,0.06), 0 1px 3px rgba(63,30,12,0.05);
  --shadow-md: 0 6px 18px rgba(63,30,12,0.10);
  --shadow-lg: 0 18px 44px rgba(63,30,12,0.16);
  --shadow-card: 0 10px 30px rgba(110,20,22,0.10);

  /* ---- Layout ---- */
  --container: 1280px;
  --container-narrow: 980px;
  --gutter: 24px;
  --header-h: 76px;
  --header-h-scrolled: 60px;
}