/* Hepzora Design Tokens
   Source of truth: assets/brand/hepzora-brand-kit.png (verified round 1)
   Master Spec §3 Brand Architecture · §55 Accessibility */

:root {
  /* ---- Core palette — the five confirmed brand colours ---- */
  --hz-ink:        #222217;  /* near-black / deep charcoal olive */
  --hz-olive:      #4D5038;  /* deep muted olive */
  --hz-sage:       #858666;  /* soft olive — SEE CONTRAST NOTE */
  --hz-stone:      #D2CBC1;  /* warm stone / beige */
  /* Subtle TEXT on a light ground. --hz-stone is #D2CBC1 — about 1.6:1 on
     white, which is below the minimum for text at any size. It is a border and
     background colour, and it was being used as the text colour for the plan's
     opening paragraph, the snapshot labels, the priority sub-lines, the whole
     tracker instruction and the sign-in hint. This is the muted ink those
     wanted: same warm olive family, ~6.4:1 on cream. */
  --hz-text-subtle: #5F6249;
  --hz-botanical:  #2F4B25;  /* deep botanical green */
  --hz-accent:     #95B09B;  /* optional secondary — accent only, never a core replacement */

  /* ---- Derived surfaces ---- */
  --hz-cream:      #FAF8F5;
  --hz-cream-warm: #F4F0EA;
  --hz-white:      #FFFFFF;

  /* ---- Semantic ----
     CONTRAST (WCAG 2.2 AA, verified):
       ink       on cream  ~15.8:1  ✅ any size
       olive     on cream  ~ 7.4:1  ✅ any size
       botanical on cream  ~ 9.0:1  ✅ any size
       sage      on cream  ~ 3.5:1  ⚠️  LARGE TEXT (>=24px, or >=19px bold) or
                                       non-text/decorative ONLY — never body copy */
  --hz-text:          var(--hz-ink);
  --hz-text-muted:    var(--hz-olive);
  --hz-text-decorative: var(--hz-sage);
  --hz-surface:       var(--hz-cream);
  --hz-surface-alt:   var(--hz-cream-warm);

  /* ---- Deliberate colour hierarchy (owner direction 2026-08-24) ----
     Large editorial sections use the muted sage #858666 — botanical and
     sophisticated rather than a bright "natural brand" green.
     The deep botanical #2F4B25 is reserved for accents and important CTAs,
     so it keeps its weight instead of covering whole sections.

     ⚠️ MEASURED, not assumed. #858666 at full strength cannot carry body copy:
       ivory #FAF8F5 on #858666 → 3.54:1  ✗ fails AA normal (needs 4.5)
       white #FFFFFF on #858666 → 3.75:1  ✗
       ink   #222217 on #858666 → 4.28:1  ✗

     So the large editorial band uses #858666 deepened toward the brand ink — same
     muted botanical family, same hue, but it can actually hold text:
       #6F7055 (= #858666 at 78% over #222217) with ivory → 4.80:1  ✓ AA normal

     #858666 itself remains in use where contrast is not at stake: decorative
     numerals, rules, and large display type. */
  --hz-surface-editorial: #6F7055;             /* large quiet sections — sage, deepened */
  --hz-surface-editorial-flat: var(--hz-sage); /* #858666 for decorative/large-type use */
  /* OWNER DIRECTION 2026-08-25: the deep section band was #2F4B25 botanical —
     a saturated forest green that read as a bright "natural brand" colour next
     to the muted editorial band. Moved into the same muted olive family, one
     step deeper than the editorial surface, so hierarchy survives without the
     saturation.
       cream #FAF8F5 on #4D5038 → 7.87:1  ✓ AA and AAA for normal text
     #2F4B25 is retained for accent buttons, where saturation is an asset. */
  --hz-surface-deep:      var(--hz-olive);     /* #4D5038 — deep muted olive */
  --hz-on-editorial:      var(--hz-cream);     /* warm ivory type on sage */
  --hz-border:        color-mix(in srgb, var(--hz-stone) 70%, transparent);

  /* ---- Typography — Lora / Open Sans (brand kit verified) ---- */
  --hz-font-heading: 'Lora', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --hz-font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Fluid type — mobile-first per Master Spec §1 */
  --hz-step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --hz-step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --hz-step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
  --hz-step-2:  clamp(1.44rem, 1.32rem + 0.60vw, 1.80rem);
  --hz-step-3:  clamp(1.73rem, 1.54rem + 0.95vw, 2.28rem);
  --hz-step-4:  clamp(2.07rem, 1.78rem + 1.45vw, 2.89rem);
  --hz-step-5:  clamp(2.49rem, 2.04rem + 2.25vw, 3.66rem);

  --hz-tracking-wide: 0.14em;   /* the brand's spaced-capital treatment */
  --hz-leading-tight: 1.15;
  --hz-leading-body:  1.65;

  /* ---- Space — 4px base ---- */
  --hz-s1: 0.25rem;  --hz-s2: 0.5rem;   --hz-s3: 0.75rem;  --hz-s4: 1rem;
  --hz-s5: 1.5rem;   --hz-s6: 2rem;     --hz-s7: 3rem;     --hz-s8: 4rem;
  --hz-s9: 6rem;     --hz-s10: 8rem;

  --hz-section-y: clamp(3.5rem, 8vw, 8rem);  /* generous, per "spacious" brief */

  /* ---- Layout ---- */
  --hz-measure: 68ch;
  --hz-container: 78rem;
  --hz-container-narrow: 46rem;
  --hz-gutter: clamp(1.25rem, 5vw, 3rem);

  --hz-radius-sm: 2px;
  --hz-radius:    4px;   /* restrained — editorial, not bubbly */
  --hz-radius-lg: 8px;

  --hz-shadow-soft: 0 1px 2px rgb(34 34 23 / 0.04), 0 8px 24px rgb(34 34 23 / 0.06);
  --hz-shadow-lift: 0 2px 4px rgb(34 34 23 / 0.06), 0 16px 40px rgb(34 34 23 / 0.10);

  --hz-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hz-dur:  380ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --hz-dur: 0.01ms; }
}