/* ==========================================================================
   HWR Type System — element defaults + role classes (classes only)

   Values are NOT defined here. They come from the Bricks Variables Manager
   (categories "Type / Primitives" and "Type / Semantic").
   Canonical values live in hwr-tokens.source.css — do not enqueue that file.

   Same fluid range as the space system: 375px -> 1600px. Type and space
   interpolate on ONE curve, so their relationship holds at every width.

   Requires root font-size 100% (1rem = 16px).
   Bricks -> Settings -> HTML font-size = 100%, set EXPLICITLY (not auto).

   ENQUEUE: yes. Load after hwr-space.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   ELEMENT DEFAULTS
   Mirror these in Bricks Theme Styles -> Typography so the builder canvas
   matches the frontend while you design.
   -------------------------------------------------------------------------- */
/* 

h1, .hwr-h1 {
  font-size: var(--hwr-type-h1, 2.375rem);
  line-height: var(--hwr-leading-tight, 1.1);
  letter-spacing: var(--hwr-tracking-tight, -0.015em);
} */

/* h2, .hwr-h2 {
  font-size: var(--hwr-type-h2, 2rem);
  line-height: var(--hwr-leading-snug, 1.2);
  letter-spacing: var(--hwr-tracking-tight, -0.015em);
}

h3, .hwr-h3 {
  font-size: var(--hwr-type-h3, 1.75rem);
  line-height: var(--hwr-leading-snug, 1.2);
}

h4, .hwr-h4 {
  font-size: var(--hwr-type-h4, 1.5rem);
  line-height: var(--hwr-leading-heading, 1.3);
}

h5, .hwr-h5 {
  font-size: var(--hwr-type-h5, 1.25rem);
  line-height: var(--hwr-leading-heading, 1.3);
}

h6, .hwr-h6 {
  font-size: var(--hwr-type-h6, 1.125rem);
  line-height: var(--hwr-leading-heading, 1.3);
} */


/* --------------------------------------------------------------------------
   ROLE CLASSES
   -------------------------------------------------------------------------- */

/* Hero only — one per page. Deliberately close to h1 so page h2s keep room. */
.hwr-display {
  font-size: var(--hwr-type-display, 2.75rem);
  line-height: var(--hwr-leading-tight, 1.1);
  letter-spacing: var(--hwr-tracking-tighter, -0.03em);
}

.hwr-lead {
  font-size: var(--hwr-type-lead, 1.125rem);
  line-height: var(--hwr-leading-relaxed, 1.65);
  max-inline-size: var(--hwr-measure, 68ch);
}

/* Pairs with --hwr-gap-tight (4->6px). Looks impossibly tight as a number,
   reads correctly on screen — uppercase sits high in its line box, so the
   line-height already supplies most of the optical space. Trust the eye. */
.hwr-eyebrow {
  font-size: var(--hwr-type-eyebrow, 0.8125rem);
  line-height: var(--hwr-leading-normal, 1.5);
  letter-spacing: var(--hwr-tracking-widest, 0.1em);
  text-transform: uppercase;
  font-weight: var(--hwr-weight-semibold, 600);
}

.hwr-small {
  font-size: var(--hwr-type-small, 0.875rem);
}

.hwr-fine {
  font-size: var(--hwr-type-fine, 0.75rem);
  line-height: var(--hwr-leading-normal, 1.5);
}


/* --------------------------------------------------------------------------
   WRAPPING — default these on. Degrade to normal wrapping where unsupported.
   -------------------------------------------------------------------------- */

.hwr-balance { text-wrap: balance; }  /* headings — evens ragged lines */
.hwr-pretty  { text-wrap: pretty; }   /* body — prevents orphans */