/* =========================================================================
 * Weedn · Design Tokens
 * Single source of truth for colors, typography, spacing.
 * ========================================================================= */

:root {
  /* ---------- Base (neutral shell) ---------- */
  --w-bg:        #070a08;   /* page background — deep forest */
  --w-bg-2:      #0d1210;   /* raised surface */
  --w-panel:     #121814;   /* card */
  --w-ink:       #eef4ef;   /* primary text */
  --w-sub:       #8e978f;   /* secondary text */
  --w-mute:      #5f6864;   /* muted / metadata */
  --w-line:      #1e2622;   /* hairline */
  --w-moss:      #14221a;   /* green-tinted surface */

  /* ---------- Category accents ----------
   * CBD and MOLÉCULES are two different product worlds. Never mix them. */

  /* CBD — lime neon (safe, daily, lab-tested) */
  --w-cbd:       #39ff7a;
  --w-cbd-dim:   #1f8a44;
  --w-cbd-soft:  rgba(57,255,122,0.08);
  --w-cbd-glow:  0 0 24px rgba(57,255,122,0.33);

  /* MOLÉCULES — violet neon (strong effects, HHC / 10-OH-HHC / Δ9 / CBN etc.) */
  --w-mol:       #b14bff;
  --w-mol-dim:   #6a2aa3;
  --w-mol-soft:  rgba(177,75,255,0.08);
  --w-mol-glow:  0 0 24px rgba(177,75,255,0.40);

  /* ---------- Typography ---------- */
  --w-display:   "Bebas Neue", "Space Grotesk", sans-serif;
  --w-mono:      "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --w-sans:      "DM Sans", "Inter", system-ui, sans-serif;

  /* ---------- Spacing (8pt base) ---------- */
  --w-s-1: 4px;  --w-s-2: 8px;  --w-s-3: 12px; --w-s-4: 16px;
  --w-s-5: 24px; --w-s-6: 32px; --w-s-7: 48px; --w-s-8: 64px; --w-s-9: 80px;

  /* ---------- Radii (almost none — technical feel) ---------- */
  --w-r-0: 0;    --w-r-1: 2px;  --w-r-2: 4px;

  /* ---------- Breakpoints (for reference in JS/docs) ----------
   * mobile  < 720px   (single column, hamburger)
   * tablet  < 1100px  (nav collapses)
   * desktop ≥ 1100px
   */
}

/* =========================================================================
 * Category helpers — apply to ANY element to colorize it by category
 * ========================================================================= */

/* Use on a scope (section, card, nav item) to switch the active accent */
[data-cat="cbd"]       { --w-accent: var(--w-cbd);  --w-accent-dim: var(--w-cbd-dim);  --w-accent-glow: var(--w-cbd-glow);  --w-accent-soft: var(--w-cbd-soft); }
[data-cat="molecules"] { --w-accent: var(--w-mol);  --w-accent-dim: var(--w-mol-dim);  --w-accent-glow: var(--w-mol-glow);  --w-accent-soft: var(--w-mol-soft); }

/* Default fallback so pages without [data-cat] still render */
:root { --w-accent: var(--w-cbd); --w-accent-dim: var(--w-cbd-dim); --w-accent-glow: var(--w-cbd-glow); --w-accent-soft: var(--w-cbd-soft); }

/* Badges for product cards / filters */
.w-badge {
  display: inline-block;
  font-family: var(--w-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  text-transform: uppercase;
  border-radius: var(--w-r-1);
}
.w-badge--cbd       { color: var(--w-cbd); text-shadow: 0 0 6px rgba(57,255,122,0.4); }
.w-badge--molecules { color: var(--w-mol); text-shadow: 0 0 6px rgba(177,75,255,0.5); }