/* thf-dv-fonts.css
   Typography for all graphic text elements.
   This file is intended for developer editing — font choices,
   sizes, weights, and line heights are all defined here.
   Color tokens from thf-dv-colors.css are used throughout.
   ─────────────────────────────────────────────────────────────────────────── */


/* ── Type scale tokens ────────────────────────────────────────────────────────
   Replace placeholder values with your organization's type system.
   Chart modules and layout CSS do not set font properties directly;
   they rely on the classes below.
   --------------------------------------------------------------------------- */

:root {

  /* Font families — replace with your chosen fonts */
  --font-sans:                  'YOUR_SANS_FONT', sans-serif;
  --font-serif:                 'YOUR_SERIF_FONT', serif;
  --font-mono:                  'YOUR_MONO_FONT', monospace;

  /* Font sizes */
  --text-designation-size:      11px;
  --text-headline-size:         22px;
  --text-subhead-size:          15px;
  --text-intro-size:            15px;
  --text-notes-size:            12px;
  --text-sources-abbrev-size:   12px;
  --text-sources-full-size:     12px;
  --text-accordion-size:        12px;

  /* Font weights */
  --text-designation-weight:    600;
  --text-headline-weight:       700;
  --text-subhead-weight:        600;
  --text-intro-weight:          400;
  --text-notes-weight:          400;
  --text-sources-weight:        400;
  --text-accordion-weight:      500;

  /* Line heights */
  --text-designation-lh:        1.2;
  --text-headline-lh:           1.25;
  --text-subhead-lh:            1.3;
  --text-intro-lh:              1.6;
  --text-notes-lh:              1.5;
  --text-sources-lh:            1.5;

  /* Letter spacing */
  --text-designation-ls:        .08em;
  --text-headline-ls:           0;
  --text-subhead-ls:            0;

}


/* ── Element classes ──────────────────────────────────────────────────────── */

/* ① Chart designation — e.g. "CHART 1", "MAP 2" */
.dv-graphic-designation {
  font-family:    var(--font-sans);
  font-size:      var(--text-designation-size);
  font-weight:    var(--text-designation-weight);
  line-height:    var(--text-designation-lh);
  letter-spacing: var(--text-designation-ls);
  text-transform: uppercase;
  color:          var(--color-ink-3);
  margin-bottom:  8px;
}

/* ② Headline */
.dv-graphic-headline {
  font-family:    var(--font-sans);
  font-size:      var(--text-headline-size);
  font-weight:    var(--text-headline-weight);
  line-height:    var(--text-headline-lh);
  letter-spacing: var(--text-headline-ls);
  color:          var(--color-ink-1);
  margin-bottom:  8px;
}

/* ③ Subhead — per-plot, sits above each SVG */
.dv-graphic-subhead {
  font-family:    var(--font-sans);
  font-size:      var(--text-subhead-size);
  font-weight:    var(--text-subhead-weight);
  line-height:    var(--text-subhead-lh);
  letter-spacing: var(--text-subhead-ls);
  color:          var(--color-ink-1);
  margin-bottom:  8px;
}

/* ④ Intro text */
.dv-graphic-intro {
  font-family:   var(--font-sans);
  font-size:     var(--text-intro-size);
  font-weight:   var(--text-intro-weight);
  line-height:   var(--text-intro-lh);
  color:         var(--color-ink-2);
  margin-bottom: 0;
}

/* ⑤ Notes */
.dv-graphic-notes {
  font-family:   var(--font-sans);
  font-size:     var(--text-notes-size);
  font-weight:   var(--text-notes-weight);
  line-height:   var(--text-notes-lh);
  color:         var(--color-ink-2);
  margin-bottom: 4px;
}

/* ⑤ Abbreviated sources */
.dv-graphic-sources-abbrev {
  font-family:   var(--font-sans);
  font-size:     var(--text-sources-abbrev-size);
  font-weight:   var(--text-sources-weight);
  line-height:   var(--text-notes-lh);
  color:         var(--color-ink-3);
  margin-bottom: 0;
}

/* ⑥ Full sources — inside accordion */
.dv-graphic-sources-full {
  font-family:  var(--font-sans);
  font-size:    var(--text-sources-full-size);
  font-weight:  var(--text-sources-weight);
  line-height:  var(--text-sources-lh);
  color:        var(--color-ink-2);
}

/* Accordion toggle label */
.dv-graphic-sources-toggle {
  font-family:     var(--font-sans);
  font-size:       var(--text-accordion-size);
  font-weight:     var(--text-accordion-weight);
  color:           var(--color-ink-3);
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  cursor:          pointer;
  border:          none;
  background:      none;
  padding:         0;
}

.dv-graphic-sources-toggle:hover {
  color: var(--color-ink-1);
  text-decoration: none;
}

/* Accordion chevron — rotates when open */
.dv-graphic-sources-toggle .chevron {
  display:    inline-block;
  transition: transform 0.2s ease;
  font-style: normal;
  font-size:  10px;
}

.dv-graphic-sources-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}