/* habb — typography source of truth
 * Single canonical type system for the entire site.
 * Uses :where() so specificity is 0 — any class-bound rule on a page wins.
 * Italic globally banned: em re-skins to terracotta tint, weight unchanged.
 */

:root {
  /* SIZE TOKENS — collapsed to 4 canonical sizes (60-30-10 type discipline)
   * Spec: max 3 hierarchy sizes + 1 eyebrow treatment + 1 hero-only mega.
   * Legacy 12-size scale aliased via --t-xs..--t-display-1 to keep pages
   * working without per-rule edits. */
  --t-eyebrow:  12px;                          /* eyebrows / fine print / legal — uppercase, tracked */
  --t-body:     16px;                          /* default reading */
  --t-subhead:  clamp(20px, 2.4vw, 26px);      /* ledes / h3 / large body */
  --t-headline: clamp(36px, 5vw, 64px);        /* h1 / h2 */
  --t-display-mega: clamp(96px, 16vw, 200px);  /* homepage hero only */

  /* Legacy aliases — kept so existing class CSS doesn't need rewriting */
  --t-xs:        var(--t-eyebrow);              /* was 11px */
  --t-sm:        var(--t-body);                 /* was 13px */
  --t-md:        var(--t-body);                 /* was 15px */
  --t-lg:        var(--t-body);                 /* was 17px */
  --t-xl:        var(--t-subhead);              /* was 19px */
  --t-2xl:       var(--t-subhead);              /* was 22px */
  --t-display-5: var(--t-subhead);              /* was clamp(24,2vw,28) */
  --t-display-4: var(--t-subhead);              /* was clamp(28,3.4vw,40) */
  --t-display-3: var(--t-headline);             /* was clamp(32,4.4vw,52) */
  --t-display-2: var(--t-headline);             /* was clamp(36,5vw,64) */
  --t-display-1: var(--t-headline);             /* was clamp(40,6vw,84) */

  /* WEIGHT TOKENS — collapsed to 2 (60-30-10 type discipline)
   * Regular 400 for body + headlines (Fraunces looks best at 400)
   * SemiBold 600 for emphasis (eyebrows, CTAs, strong) */
  --w-regular:  400;
  --w-semibold: 600;
  /* Legacy weight aliases */
  --w-light:    400;                            /* 300 collapsed → 400 */
  --w-medium:   600;                            /* 500 collapsed → 600 */
  --w-bold:     600;                            /* 700 collapsed → 600 */

  /* LINE-HEIGHT TOKENS — luxury rule (2026-04-29):
     headlines tighten, body breathes. Editorial pacing. */
  --lh-display: 1.05;          /* was 1.04 — codify the headline floor */
  --lh-h2: 1.05;               /* was 1.10 — tightened for authority */
  --lh-h3: 1.20;
  --lh-tight: 1.25;
  --lh-lede: 1.40;
  --lh-ui: 1.40;
  --lh-body: 1.55;
  --lh-prose: 1.70;            /* was 1.65 — body breathes wider */

  /* LETTER-SPACING TOKENS */
  --ls-mega: -0.030em;
  --ls-d1: -0.026em;
  --ls-d2: -0.022em;
  --ls-d3: -0.018em;
  --ls-h3: -0.012em;
  --ls-body: -0.005em;
  --ls-ui: -0.003em;
  --eyebrow-tracking: 0.12em;
  --eyebrow-tracking-wide: 0.16em;
  --ls-button: 0.06em;

  /* SPACING / RHYTHM TOKENS — semantic gaps */
  --gap-eyebrow-h2: 24px;
  --gap-h2-lede: 32px;
  --gap-lede-body: 24px;
  --gap-body-body: 16px;
  --gap-block: 48px;

  /* 8-POINT SPACING SCALE — use everywhere instead of off-grid values */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-14: 112px;
  --space-16: 128px;

  /* SHADOW TOKENS — paper / vitrine / letterpress / lift / pressed */
  --shadow-paper: 0 1px 2px rgba(42, 27, 18, 0.04);
  --shadow-vitrine: 0 8px 24px rgba(42, 27, 18, 0.06), 0 2px 6px rgba(42, 27, 18, 0.04);
  --shadow-letterpress: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(42, 27, 18, 0.06);
  --shadow-lift: 0 12px 28px rgba(42, 27, 18, 0.08), 0 4px 10px rgba(42, 27, 18, 0.05);
  --shadow-pressed: inset 0 2px 4px rgba(42, 27, 18, 0.10);

  /* TOUCH TARGETS */
  --touch-min: 44px;

  /* PROSE WIDTH — 60ch tightens to comfortable reading rhythm */
  --prose-max: 60ch;             /* was 680px */

  /* CONTAINER WIDTH — single source for max-width across pages */
  --content-max: 1200px;
}

/* Mobile mega-display dial-down — hero only */
@media (max-width: 479px) {
  :root {
    --t-display-mega: clamp(64px, 22vw, 120px);
  }
}

/* Headlines — tight + authoritative. :where() keeps specificity 0. */
:where(h1, h2) {
  line-height: var(--lh-display);          /* 1.05 */
  letter-spacing: -0.03em;
}

/* Small labels / captions / tracked-out fine print — precision register */
:where(.label, .caption) {
  font-size: var(--t-eyebrow);             /* 11–12px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Italic globally banned — em re-skins to terracotta tint, no slant */
:where(em, i, cite) {
  font-style: normal;
  color: var(--terracotta-text, #6F3920);
}

/* Pull-quotes / blockquotes — never italic */
:where(blockquote, q, .pull-quote) {
  font-style: normal;
}

/* Prose default — max-width + comfortable line-height */
:where(p) {
  max-width: var(--prose-max);
  line-height: var(--lh-prose);
}

:where(p.full-width),
:where(p[data-no-prose-cap]),
:where(.eyebrow),
:where(footer p),
:where(nav p),
:where(li p),
:where(td p),
:where(th p),
:where(button p),
:where(a p),
:where(label p) {
  max-width: none;
}

/* UI line-height lock — buttons / pills / badges / eyebrows never inherit prose 1.65 */
:where(button),
:where(.btn-primary),
:where(.btn-secondary),
:where(.shop-btn),
:where(.pack-pill),
:where(.trust-badge-tiny),
:where(.eyebrow),
:where(.benefit-tag) {
  line-height: var(--lh-ui);
}

/* Touch-target floor on all interactive primitives */
:where(button),
:where(.btn-primary),
:where(.btn-secondary),
:where(input[type="submit"]),
:where(input[type="button"]),
:where([role="button"]) {
  min-height: var(--touch-min);
}