/* ==================================================================
   Babel site — title scale
   The real title values live here as variables, once. Pages consume the
   compiled .bbl-h1 / .bbl-h2 / .bbl-h3 classes and carry no inline
   font-size overrides, so the visual level always matches the semantic
   level (h1 > h2 > h3) on every page.
   Colour, margins and text-wrap stay on the page as utilities — only the
   type scale is centralised here.
   Layered on top of the design system's tokens/typography.css, which is
   shared and stays untouched.
   ================================================================== */

:root {
  --bbl-title-font:   var(--cb-font-display, 'Open Sans', sans-serif);
  --bbl-title-weight: 700;

  /* h1 — one per page: the page title / hero headline */
  --bbl-h1-size:  clamp(32px, 3.8vw, 48px);
  --bbl-h1-line:  1.1;
  --bbl-h1-track: -0.01em;

  /* h2 — section titles */
  --bbl-h2-size:  clamp(26px, 3.2vw, 42px);
  --bbl-h2-line:  1.14;
  --bbl-h2-track: -0.01em;

  /* h3 — card and sub-section titles */
  --bbl-h3-size:  clamp(19px, 1.7vw, 22px);
  --bbl-h3-line:  1.3;
  --bbl-h3-track: 0em;
}

.bbl-h1 {
  font-family:    var(--bbl-title-font);
  font-weight:    var(--bbl-title-weight);
  font-size:      var(--bbl-h1-size);
  line-height:    var(--bbl-h1-line);
  letter-spacing: var(--bbl-h1-track);
}

.bbl-h2 {
  font-family:    var(--bbl-title-font);
  font-weight:    var(--bbl-title-weight);
  font-size:      var(--bbl-h2-size);
  line-height:    var(--bbl-h2-line);
  letter-spacing: var(--bbl-h2-track);
}

.bbl-h3 {
  font-family:    var(--bbl-title-font);
  font-weight:    var(--bbl-title-weight);
  font-size:      var(--bbl-h3-size);
  line-height:    var(--bbl-h3-line);
  letter-spacing: var(--bbl-h3-track);
}