/* ==========================================================================
   DESIGN TOKENS  -  edit brand values here, nowhere else.
   Palette values were estimated by eye from a homepage screenshot of
   bodhisupplements.com. Confirm against Elementor > Site Settings > Global Colors.
   ========================================================================== */
:root{
  /* ---- Brand palette (raw) ---- */
  --bodhi-forest-950:#14231B;
  --bodhi-forest-900:#1B2B22;
  --bodhi-green-700:#1F4D2E;
  --bodhi-green-600:#2C6A3F;
  --bodhi-leaf-500:#6E9B3E;
  --bodhi-leaf-300:#A9CB85;
  --bodhi-teal-500:#1FA67A;
  --bodhi-copper-500:#C4885A;
  --bodhi-copper-700:#8A5A32;
  --bodhi-cream-50:#FAF8F4;
  --bodhi-cream-100:#F2EEE6;
  --bodhi-sand-300:#DDD5C6;
  --bodhi-white:#FFFFFF;

  /* ---- Semantic color tokens (components use ONLY these) ---- */
  --color-surface-base:var(--bodhi-cream-50);
  --color-surface-raised:var(--bodhi-white);
  --color-surface-sunken:var(--bodhi-cream-100);
  --color-surface-inverse:var(--bodhi-forest-900);
  --color-surface-inverse-deep:var(--bodhi-forest-950);
  --color-text-primary:var(--bodhi-forest-900);
  --color-text-secondary:#4F5C53;
  --color-text-inverse:#F6F4EE;
  --color-text-link:var(--bodhi-green-700);
  --color-text-sale:#A3321F;
  --color-text-eyebrow:var(--bodhi-copper-700);
  --color-border-subtle:#E4DED2;
  --color-border-strong:var(--bodhi-forest-900);
  --color-action-bg:var(--bodhi-green-700);
  --color-action-bg-hover:var(--bodhi-forest-900);
  --color-action-text:var(--bodhi-white);
  --color-announce-bg:var(--bodhi-copper-500);
  --color-announce-text:var(--bodhi-forest-900);
  --color-ticker-bg:var(--bodhi-green-700);
  --color-ticker-text:#E9F1E4;
  --color-badge-bg:var(--bodhi-forest-900);
  --color-badge-text:var(--bodhi-white);
  --color-count-bg:var(--bodhi-teal-500);
  --color-count-text:var(--bodhi-forest-950);
  --color-focus-ring:var(--bodhi-green-700);
  --color-focus-ring-inverse:var(--bodhi-white);
  --color-overlay:rgba(20,35,27,.5);
  --color-error:#A3321F;
  --color-success:var(--bodhi-green-700);

  /* ---- Typography ---- */
  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-body:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-size-xs:12px; --font-size-sm:14px; --font-size-md:16px; --font-size-lg:24px;
  --font-size-xl:30px; --font-size-2xl:36px; --font-size-3xl:48px;
  --font-size-display:clamp(36px,6vw,72px);
  --font-weight-base:400; --font-weight-medium:500; --font-weight-strong:600;
  --line-height-base:24px; --line-height-tight:1.15; --line-height-copy:1.6;
  --tracking-label:.08em;

  /* ---- Spacing (4px base) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:14px; --space-5:16px;
  --space-6:24px; --space-7:80px; --space-8:32px; --space-9:48px;
  --gutter:clamp(16px,2.4vw,40px);

  /* ---- Shape, elevation, motion ---- */
  --radius-xs:2px; --radius-pill:999px;
  --shadow-drawer:0 0 40px rgba(20,35,27,.18);
  --shadow-mega:0 12px 24px rgba(20,35,27,.08);
  --motion-instant:150ms; --motion-fast:200ms; --motion-drawer:320ms;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ---- Layout / stacking ---- */
  --header-h:64px;
  --z-header:40; --z-mega:41; --z-overlay:60; --z-drawer:61; --z-toast:70;
}