/* ============================================================================
   hempkart.in — DESIGN TOKENS  ·  BRAND v2 (the re-skin)
   ----------------------------------------------------------------------------
   Source of truth: brand-v2/brand-system.md (Part B = 1:1 re-skin of v1 token
   NAMES with new VALUES; Part C = NEW additive tokens; Part D = texture/motion
   recipes). The v1 token NAMES are the contract — every v1 name is kept and
   mapped 1:1 onto a v2 value. NEW tokens are additive and flagged below.

   This is the v2 token set: a re-skin (look + tone), NOT a re-architecture.
   No v1 token name is renamed or dropped; the IA / components / slot IDs / the
   two-flow seam are unchanged. components.css and every template compose from
   these custom properties — no raw hex, no raw px font sizes downstream.

   Load order (see INTEGRATION-PATTERN.md): base.css -> tokens.css -> components.css
   ----------------------------------------------------------------------------
   Direction (brand-system §A.1): "Bold honesty, grown naturally." Warm earth,
   generous space, real texture, ONE confident clay-terracotta accent used like a
   raised voice — bold on the human promise, dead-plain and sober the instant we
   touch a fact, a price, a legality, or the gated lane. No neon green, no
   cannabis-leaf motif, no 420 cliché. The accent is terracotta, never green.
   ============================================================================ */

:root {

  /* ==========================================================================
     COLOUR  (brand-system §B.1 — 1:1 swap onto v1 names)
     ========================================================================== */

  /* --- PRIMARY / BRAND --- */
  --color-bark:        #23301F;  /* deeper green-black than v1 — headers, primary text, dark bands, footer, wordmark; the grounded anchor */
  --color-sage:        #5E7A4E;  /* braver, more saturated sage-olive — now structural/brand + btn-secondary (ceded primary CTA to the accent) */
  --color-sage-dark:   #47603A;  /* hover / pressed deeper sage-olive */
  --color-linen:       #F1E9D8;  /* warmer, oatier off-white — the page ground now carries warm-earth temperature */
  --color-paper:       #FBF7EE;  /* card / surface — warm cream-white (not cold #FFF); surfaces feel like good paper */

  /* --- ACCENT / TRUST --- */
  --color-trust:       #1C6E5C;  /* greener, confident pine-teal — Learn/Guided-Help nav, trust cues, COA-adjacent chrome; distinct from sage AND the accent */
  --color-trust-soft:  #D7E8E0;  /* trust-chip / vendor-chip background; soft pine tint */
  --color-gold:        #B8893A;  /* RESERVED — verification / licence / COA only (badge-coa, badge-licence); warmer ochre */

  /* trust-accent token (design-spec §1.3): maps trust-accent -> --color-trust so
     downstream code uses a stable token name. (Kept unchanged from v1 — a mapping,
     not a value.) */
  --color-trust-accent: var(--color-trust);

  /* --- GATED LANE (the §3b CBD lane — SOBER slate-violet, deliberately distinct) --- */
  /* Cool, desaturated, clinical — the opposite temperature to the warm bold accent
     and the warm food-lane surfaces. NOT red (red would read danger/illegal). */
  --color-gate:        #574E66;  /* sober slate-violet — lock affordance, badge-gated, btn-consult, gated chrome */
  --color-gate-soft:   #ECE8F1;  /* gated surface tint — cool, quiet slate-violet wash */

  /* --- FEEDBACK --- */
  --color-positive:    #2F7D58;  /* in-stock / verified — a clear natural green, distinct from sage-olive + trust-teal */
  --color-warn:        #9A6A2E;  /* caution (age gate, "consult required") — sober amber-brown, NOT red, NOT panic */
  --color-error:       #A6362F;  /* RESERVED — form errors ONLY; never decorative, never the gated lane */

  /* --- NEUTRALS --- */
  --color-ink:         #23301F;  /* body text (= bark) — deepened for crisp contrast on the warmer grounds */
  --color-ink-muted:   #5B6657;  /* secondary text, ".in" in the wordmark, captions, legal microcopy — present, AA-legible, never hidden */
  --color-line:        #DDD3BD;  /* hairlines / dividers — a warm oat line */


  /* ==========================================================================
     NEW COLOUR TOKENS  (brand-system §C.1 — additive, the v2 craft layer)
     ========================================================================== */

  --color-accent:      #C75B39;  /* THE confident accent (clay-terracotta) — hero emphasis, seed motif, link/underline accents, key anchors */
  --color-accent-bold: #A8472A;  /* deeper accent — btn-primary fill (≈5.4:1 with cream → AA), hover/pressed accent */
  --color-accent-soft: #F4DDD2;  /* soft terracotta wash — accent chip backgrounds, the guide-note wash; NEVER behind legal microcopy */
  --color-oat:         #E7DCC2;  /* warm-earth mid step between linen and line — alternating section bands, subtle zone separation */
  --color-cream:       #F3ECDD;  /* light warm cream — wordmark-on-dark, footer/hero text on bark, the warmest light surface */
  --color-bark-2:      #2E3D28;  /* a second, slightly lighter bark for layering dark sections without flat sameness */


  /* ==========================================================================
     TYPOGRAPHY  (brand-system §B.2 — 1:1 swap onto v1 names)
     ========================================================================== */

  /* Font families. Bricolage Grotesque (heads/display/wordmark) = the expressive,
     bold-challenger grotesque; Hanken Grotesk (body/UI/prices/legal) = the warm
     humanist body sans. Fallbacks (system-ui / Georgia) keep the system honest if
     a webfont fails (display=swap; text never blocked on a font). */
  --font-head: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* NEW (§C.2, additive): the editorial-serif premium-reassurance accent face.
     Sparing, deliberate. Falls back to --font-head cleanly. */
  --font-display: "Fraunces", "Bricolage Grotesque", Georgia, serif;

  /* Type scale — v2: bigger and bolder at the top; legal microcopy untouched at
     the bottom (brand-system §B.2). */
  --text-xs:   12px;  /* line-height 16 — labels, legal microcopy, badge text (UNCHANGED — honesty stays readable) */
  --text-sm:   14px;  /* line-height 20 — secondary, captions, filter chips */
  --text-base: 16px;  /* line-height 27 — body, product copy */
  --text-lg:   20px;  /* line-height 29 — card titles, lead-in */
  --text-xl:   26px;  /* line-height 33 — section headings */
  --text-2xl:  33px;  /* line-height 40 — page titles, finder-result heading */
  --text-3xl:  42px;  /* line-height 47 — sub-hero / large section moments */
  --text-4xl:  54px;  /* line-height 57 — hero headline, mobile/standard */
  --text-5xl:  68px;  /* line-height 70 — NEW: desktop manifesto headline (Bricolage 700/800) */
  --text-6xl:  88px;  /* line-height 88 — NEW: the single biggest manifesto moment (hero on wide desktop); once per page max */

  /* Matching line-heights (so downstream can pair size+leading without guessing). */
  --leading-xs:   16px;
  --leading-sm:   20px;
  --leading-base: 27px;
  --leading-lg:   29px;
  --leading-xl:   33px;
  --leading-2xl:  40px;
  --leading-3xl:  47px;
  --leading-4xl:  57px;
  --leading-5xl:  70px;   /* NEW */
  --leading-6xl:  88px;   /* NEW */

  /* Weights (brand-system §B.2 — carried over unchanged). */
  --weight-reg:  400;
  --weight-med:  500;
  --weight-semi: 600;
  --weight-bold: 700;


  /* ==========================================================================
     SPACING / RADII / SHADOW  (brand-system §B.3 — 1:1 swap onto v1 names)
     ========================================================================== */

  /* 4px base scale, tokens --space-1 … --space-9. v2 OPENS the upper steps
     (6–9: 40/56/80/120) for braver, more generous, crafted whitespace; lower
     steps (1–5: 4/8/12/16/24) unchanged so component internals don't reflow. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  40px;
  --space-7:  56px;
  --space-8:  80px;
  --space-9:  120px;

  /* Radii — softer, more tactile/organic. */
  --radius-sm: 8px;   /* chips, inputs */
  --radius-md: 14px;  /* cards, buttons */
  --radius-lg: 22px;  /* modals, hero panels, large surfaces */

  /* Shadow — soft, warm-tinted (bark-based rgba), slightly larger spread than v1. */
  --shadow-card: 0 1px 2px rgba(35,48,31,.06), 0 6px 20px rgba(35,48,31,.07);


  /* ==========================================================================
     NEW TEXTURE TOKENS  (brand-system §C.3 — additive)
     The --texture-paper recipe is implemented in CSS (the homepage inline grain
     overlay / .hp-grain); these are the opacity knobs that govern it.
     ========================================================================== */

  --texture-grain-opacity:        0.045;  /* ≈4.5% — grain on light grounds; subtle enough never to touch legibility */
  --texture-grain-opacity-strong: 0.07;   /* ≈7% — grain on large dark --color-bark bands (hero/footer) */


  /* ==========================================================================
     NEW MOTION TOKENS  (brand-system §C.4 — additive)
     Centralise all timing / easing / lift. Used by the on-load hero entrance,
     the scroll-in reveals, and the tactile hover/press states.
     ========================================================================== */

  --motion-duration-fast: 140ms;  /* hover/press feedback, small state changes */
  --motion-duration-base: 240ms;  /* standard transitions (card lift, button hover, accent reveals) */
  --motion-duration-slow: 520ms;  /* scroll-in reveals — gentle, never sluggish */
  --motion-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);   /* the "settle" ease — decisive then gentle */
  --motion-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);     /* standard soft ease for UI state */
  --motion-lift: -4px;                                   /* tactile hover lift distance for cards */
  --motion-lift-shadow: 0 2px 4px rgba(35,48,31,.08), 0 12px 30px rgba(35,48,31,.10);  /* deepened shadow on a lifted surface */
  --motion-reveal-distance: 16px;                        /* scroll-in entry offset (translateY start) */


  /* ==========================================================================
     GRID  (brand-system §B.3 — carried verbatim, unchanged)
     ========================================================================== */

  --container-max: 1200px;  /* desktop 12-col container max width */
  --gutter:        24px;    /* desktop gutter */

}