/* ════════════════════════════════════════════════════════════
   Dehli Organic Spices — Design Tokens  ·  WHITE / BLACK / GREEN v3.0
   Off-white ground · forest-green primary · near-black text · sage cue.
   No red, no gold. tokens.css is the live source of truth for colour.
   ════════════════════════════════════════════════════════════ */

:root {
  /* === BACKGROUNDS (white theme, no black blocks) === */
  --color-bg-base:    #FCFCFA;   /* page ground — off-white */
  --color-bg-card:    #FFFFFF;   /* card / surface */
  --color-bg-dark:    #F1F2EC;   /* tinted inset / footer / alt band (name kept for compat) */
  --color-bg-raised:  #FFFFFF;   /* raised surface */
  --color-bg-tint:    #F5F6EF;   /* faint section tint */

  /* === PRIMARY — Forest Green (headings accent · CTA · links · price-strong) === */
  --color-primary-100: #D8E6DC;
  --color-primary:     #1E5631;   /* ★ primary action */
  --color-primary-600: #163F22;
  --color-primary-800: #0E2A16;

  /* === GREEN family (organic / fresh / category cue) === */
  --color-lime-100:   #E6F0CC;
  --color-lime:       #5F8B27;
  --color-lime-600:   #4C7220;
  --color-lime-800:   #385416;

  /* === SAGE (soft secondary green) === */
  --color-sage-100:   #E9EFDB;
  --color-sage-300:   #A9C081;
  --color-sage:       #6E8B4A;
  --color-sage-800:   #43571F;

  /* === "GOLD" tokens repointed to sage-green (pure b/w/green — no warm) === */
  --color-gold-100:   #E6F0CC;
  --color-gold:       #6E8B4A;
  --color-gold-600:   #557E1E;
  --color-gold-800:   #385416;

  /* === SPICE / SKY kept for rare semantics, nudged neutral-green === */
  --color-spice-warm: #6E8B4A;
  --color-spice-deep: #43571F;
  --color-sky-100:    #DCE6DF;
  --color-sky-400:    #7FA98C;
  --color-sky:        #3E6B4C;

  /* === NEUTRALS (near-black ink) === */
  --color-ink:        #16130F;   /* near-black — text, SALE tag, dark UI */

  /* === TEXT (near-black on white) === */
  --text-primary:     #16130F;   /* headings + strong body / price */
  --text-muted:       #2C2A26;   /* body / secondary — warm near-black ink (v3.1, was #5C574E grey) */
  --text-faint:       #756F66;   /* captions / meta — darkened for contrast */

  /* === BORDER RADIUS (flat / sharp) === */
  --radius-tag:    2px;
  --radius-sm:     3px;
  --radius-btn:    10px;  /* buttons — softer pill (v3.1, was 3px squarish) */
  --radius-input:  8px;   /* inputs/fields — echo the softer buttons */
  --radius-card:   4px;
  --radius-modal:  6px;
  --radius-pill:   9999px;

  /* button depth (v3.1) */
  --shadow-btn:       0 4px 14px rgba(30,86,49,0.22);
  --shadow-btn-hover: 0 7px 20px rgba(30,86,49,0.30);

  /* === HAIRLINES / LINES (green rule + neutral ink dividers) === */
  --hairline:      rgba(30,86,49,0.30);   /* green rule */
  --hairline-gold: rgba(30,86,49,0.24);
  --line:          rgba(22,19,15,0.10);   /* neutral divider */
  --line-strong:   rgba(22,19,15,0.16);
  --line-sage:     rgba(22,19,15,0.10);   /* card border at rest */
  --line-lime:     rgba(30,86,49,0.16);   /* printed divider */
  --line-lime-strong: rgba(30,86,49,0.38);/* card border on hover */

  /* === SPACING (4px base) === */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-6:  24px;  --sp-8:  32px;  --sp-12: 48px;  --sp-16: 64px;
  --sp-24: 96px;  --sp-32: 128px;

  /* === SHADOWS (soft neutral for white theme) === */
  --shadow-sm: 0 1px 2px rgba(22,19,15,0.05);
  --shadow-md: 0 6px 18px rgba(22,19,15,0.07);
  --shadow-lg: 0 18px 44px rgba(22,19,15,0.10);
  --shadow-glow: 0 10px 28px -12px rgba(30,86,49,0.28);

  /* === MOTION === */
  --dur-fast:  100ms;
  --dur-base:  200ms;
  --dur-slow:  350ms;
  --dur-xslow: 700ms;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === TYPOGRAPHY === */
  --font-display: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;   /* headlines — matches jar labels (rounded) */
  --font-sans:    'Quicksand', 'Segoe UI', system-ui, sans-serif; /* body / UI — rounded geometric, NO italic */
  --font-urdu:    'Noto Nastaliq Urdu', serif;                    /* desi taglines */
  --font-accent:  'Quicksand', 'Segoe UI', sans-serif;            /* eyebrow labels */

  /* === TEXTURE (very faint paper grain) === */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");

  /* === LAYOUT === */
  --container:     1240px;
  --container-wide:1440px;
  --header-h:      78px;
}