/* ── DESIGN TOKENS ──────────────────────────────────────────
   Few / Tufte Visualization Design Handbook
   Single source of truth for all color, type, and spacing tokens.
   ──────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces ──────────────────────────────────────────── */
  --bg-chrome:      #f5f5f5;
  --bg-page:        #f0eeeb;
  --bg-panel:       #f9f9f6;
  --bg-surface:     #ffffff;
  --bg-header:      #1a1917;
  --bg-table-head:  #e8e5e0;
  --bg-table-alt:   #faf9f7;
  --border:         #d8d4ce;
  --border-row:     #ede9e4;

  /* ── Text ──────────────────────────────────────────────── */
  --text-1:         #1a1917;
  --text-2:         #5a5650;
  --text-3:         #9a948e;

  /* ── Data ──────────────────────────────────────────────── */
  --bar-main:       #4a4845;
  --bar-dim:        #b0aaa4;

  /* ── Accent ────────────────────────────────────────────── */
  --accent-warm:    #c97b2e;
  --accent-crit:    #c0392b;
  --cobalt-hi:      #1a4db8;
  --cobalt-lo:      #8099b8;
  --badge-yes:      #2a7a4a;

  /* ── Typography — Font Stacks ────────────────────────────── */
  --font-sans:      'IBM Plex Sans', sans-serif;
  --font-mono:      'IBM Plex Mono', monospace;

  /* ── Typography — Scale ────────────────────────────────── */
  /* type/heading-section — section h2s, principle titles */
  --type-heading-section-size:    16px;
  --type-heading-section-weight:  600;

  /* type/heading-panel — panel h3s, pair titles, chart names */
  --type-heading-panel-size:      13px;
  --type-heading-panel-weight:    600;

  /* type/subtitle — subtitles, descriptions */
  --type-subtitle-size:           13px;
  --type-subtitle-weight:         400;

  /* type/kpi-value — large KPI numbers */
  --type-kpi-value-size:          22px;
  --type-kpi-value-weight:        700;

  /* type/kpi-chip-value — KPI chip numbers in header bar */
  --type-kpi-chip-value-size:     12px;
  --type-kpi-chip-value-weight:   500;

  /* type/kpi-chip-label — KPI chip labels in header bar */
  --type-kpi-chip-label-size:     8px;
  --type-kpi-chip-label-weight:   400;
  --type-kpi-chip-label-spacing:  0.1em;

  /* type/kpi-label — uppercase KPI labels */
  --type-kpi-label-size:          11px;
  --type-kpi-label-weight:        400;
  --type-kpi-label-spacing:       0.1em;

  /* type/table-header — thead cells */
  --type-table-header-size:       11px;
  --type-table-header-weight:     600;
  --type-table-header-spacing:    0.08em;

  /* type/body — table cells, general body text */
  --type-body-size:               13px;
  --type-body-weight:             400;

  /* type/mono-number — numeric values in mono */
  --type-mono-number-size:        13px;
  --type-mono-number-weight:      400;

  /* type/chart-axis — axis labels, sparkline labels */
  --type-chart-axis-size:         11px;
  --type-chart-axis-weight:       400;

  /* type/badge — badge text */
  --type-badge-size:              10px;
  --type-badge-weight:            500;
  --type-badge-spacing:           0.05em;

  /* type/label — frame labels, section eyebrows */
  --type-label-size:              11px;
  --type-label-weight:            600;
  --type-label-spacing:           0.08em;

  /* type/annotation — code annotations, citations */
  --type-annotation-size:         10px;

  /* type/page-title — page headings */
  --type-page-title-size:         28px;
  --type-page-title-weight:       700;

  /* type/nav — nav link text */
  --type-nav-size:                13px;
  --type-nav-weight:              400;

  /* type/nav-logo — nav wordmark */
  --type-nav-logo-size:           15px;
  --type-nav-logo-weight:         700;
}