@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
  font-display: swap;
  src: url(fonts/bricolage-grotesque-4.ttf) format('truetype');
}

/* Shared type hierarchy: bold headings, semibold controls, readable body text. */
:root { --font-sans: 'Bricolage Grotesque', 'Segoe UI', 'Noto Color Emoji', sans-serif; }
body, button, input, select, textarea { font-family: var(--font-sans); font-optical-sizing: auto; }
body { font-weight: 400; }
h1, h2, h3, .brand-title { font-weight: 800; letter-spacing: -.025em; }
header .brand-title { font-weight: 800; }
.brand-badge, header .brand-badge { font-weight: 600; }
label, th, .btn, .view-tab-btn { font-weight: 600; }
.grid-header > div:first-child, .toolbar-title, .modal-header h3 { font-weight: 700; }
.chip-val, .sentence-circle { font-weight: 700; font-variant-numeric: tabular-nums; }
td, #modal-ref-text { font-weight: 500; }
p, .legend-item, .upload-progress-text { font-weight: 400; }
strong, b { font-weight: 700; }