/* thf-dv-variables.css
   Spacing, stroke widths, and structural tokens for the THF data graphics system.
   Color tokens live in thf-dv-colors.css — edit there for palette changes.
   Load after thf-dv-colors.css.
   ─────────────────────────────────────────────────────────────────────────── */

:root {

  /* ── Stroke widths ────────────────────────────────────────────────────────
     Used by chart modules for grid lines, axis lines, and zero baseline.
     ---------------------------------------------------------------------- */

  --stroke-grid:           0.5px;
  --stroke-axis:           0.5px;
  --stroke-zero:           1px;


  /* ── Spacing ──────────────────────────────────────────────────────────────
     Vertical rhythm between graphic elements.
     ---------------------------------------------------------------------- */

  --space-graphic-gap:     32px;   /* between stacked graphics on a page */
  --space-header-bottom:   16px;   /* below intro text, above first plot */
  --space-plot-gap:        24px;   /* between stacked plots */
  --space-footer-top:      16px;   /* above notes, below last plot */
  --space-sources-top:      8px;   /* between abbrev. sources and accordion */


  /* ── Graphic border ───────────────────────────────────────────────────────
     Thin rule at top and bottom of each graphic container.
     ---------------------------------------------------------------------- */

  --dv-graphic-rule:      1px solid var(--color-border);

  /* ── Bootstrap 5 breakpoints ─────────────────────────────────────────────
     Mirrors Bootstrap's breakpoint scale for consistent use in media queries
     and JS. Upper bounds (max-width) are 0.02px below the next breakpoint.
     ---------------------------------------------------------------------- */

  --bp-sm:       576px;
  --bp-md:       768px;
  --bp-lg:       992px;
  --bp-xl:      1200px;
  --bp-xxl:     1400px;

  /* Max-width values (upper bound, exclusive) for max-width media queries */
  --bp-sm-max:   575.98px;
  --bp-md-max:   767.98px;
  --bp-lg-max:   991.98px;
  --bp-xl-max:  1199.98px;
  --bp-xxl-max: 1399.98px;

}