/* Dashboard 5: common fluid typography, 320-1920 CSS px; absolute 10px text minimum. */
:root{
  --vasc-font-10:clamp(10px,calc(0.575rem + 0.25vw),0.875rem);
  --vasc-font-12:clamp(12px,calc(0.7rem + 0.25vw),1rem);
  --vasc-font-14:clamp(14px,calc(0.825rem + 0.25vw),1.125rem);
  --vasc-font-16:clamp(16px,calc(0.925rem + 0.375vw),1.375rem);
  --vasc-font-20:clamp(20px,calc(1.15rem + 0.5vw),1.75rem);
  --vasc-font-22:clamp(22px,calc(1.275rem + 0.5vw),1.875rem);
  --vasc-font-30:clamp(30px,calc(1.825rem + 0.25vw),2.125rem);
  --vasc-font-40:clamp(30px,calc(1.65rem + 1.125vw),3rem);
}
body{font-size:var(--vasc-font-14)}

/* SVG axes and legends use the same small-label role; Plotly remains responsible for chart layout. */
.js-plotly-plot .xtick text,.js-plotly-plot .ytick text,.js-plotly-plot .legendtext,.js-plotly-plot .colorbar text{font-size:var(--vasc-font-10)!important}

/* Semantic roles: new HTML must use these roles; numeric aliases above retain compatibility. */
:root{--vasc-text-label:var(--vasc-font-10);--vasc-text-support:var(--vasc-font-12);--vasc-text-body:var(--vasc-font-14);--vasc-text-number:var(--vasc-font-16);--vasc-text-section:var(--vasc-font-20);--vasc-text-title:var(--vasc-font-22)}
:where([data-vasc-type="label"]){font-size:var(--vasc-text-label,var(--vasc-font-10))}
:where([data-vasc-type="support"]){font-size:var(--vasc-text-support,var(--vasc-font-12))}
:where([data-vasc-type="body"]){font-size:var(--vasc-text-body,var(--vasc-font-14))}
:where([data-vasc-type="number"]){font-size:var(--vasc-text-number,var(--vasc-font-16))}
:where([data-vasc-type="section"]){font-size:var(--vasc-text-section,var(--vasc-font-20))}
:where([data-vasc-type="title"]){font-size:var(--vasc-text-title,var(--vasc-font-22))}