/* Honest Figures — Design Tokens (CSS custom properties) v1
   Generated from tokens.json. Import first, before components.css.
   Light is the default; dark applies via prefers-color-scheme OR [data-theme="dark"]. */

:root{
  /* brand */
  --hf-teal:#0E7C7B; --hf-teal-dark:#0A5E5D; --hf-teal-2:#4DAFA6;
  /* button/CTA teal — stays dark enough for WHITE text in BOTH themes (white on #0C6E6B = 6.1:1) */
  --hf-teal-btn:#0C6E6B;
  /* neutral (light) */
  --hf-ink:#0B1F24; --hf-muted:#5B6B6A; --hf-hairline:#E3E6E4; --hf-surface:#F6F4EF; --hf-canvas:#FFFFFF;
  /* semantic */
  --hf-gain:#0F9D58; --hf-loss:#D64545; --hf-focus:#0E7C7B;
  /* dataviz — categorical (fixed order, never cycled). dv-1 teal = the SUBJECT series only. */
  --hf-dv-1:#0E7C7B; --hf-dv-2:#2563EB; --hf-dv-3:#E8963A; --hf-dv-4:#8B5CF6; --hf-dv-5:#D64545; --hf-dv-6:#5B6B6A;
  /* chart-fill amber darkened to clear the 3:1 mark-contrast floor on white (validated) */
  --hf-dv-3-mark:#C57F2E;
  /* sequential ramp (magnitude — choropleths/heatmaps): brand teal, light -> ink-deep */
  --hf-seq-100:#DCEFEE; --hf-seq-200:#B7DEDC; --hf-seq-300:#8ECBC8; --hf-seq-400:#5FB3B0;
  --hf-seq-500:#2E9793; --hf-seq-600:#0E7C7B; --hf-seq-700:#0A5E5D;
  /* diverging (polarity — below/above average): teal <-> amber, neutral-gray midpoint */
  --hf-div-neg:#0E7C7B; --hf-div-mid:#EFECE6; --hf-div-pos:#C57F2E;
  /* chart structure */
  --hf-grid:#E3E6E4; --hf-axis:#5B6B6A;

  /* type */
  --hf-font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --hf-font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --hf-font-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;
  --hf-fw-regular:400; --hf-fw-medium:500; --hf-fw-semibold:600; --hf-fw-bold:700;

  /* type scale */
  --hf-fs-display-xl:56px; --hf-fs-display-l:40px; --hf-fs-display-m:30px; --hf-fs-title:24px;
  --hf-fs-lead:19px; --hf-fs-body:16px; --hf-fs-sm:14px; --hf-fs-xs:12px;
  --hf-fs-result-xl:52px; --hf-fs-result-l:40px;
  --hf-ls-display:-0.02em; --hf-ls-eyebrow:0.14em;

  /* space */
  --hf-space-1:4px; --hf-space-2:8px; --hf-space-3:12px; --hf-space-4:16px; --hf-space-5:20px;
  --hf-space-6:24px; --hf-space-8:32px; --hf-space-10:40px; --hf-space-12:48px; --hf-space-16:64px;

  /* radius / shadow / border */
  --hf-radius-sm:6px; --hf-radius-md:10px; --hf-radius-lg:12px; --hf-radius-xl:16px; --hf-radius-2xl:22px; --hf-radius-pill:999px;
  --hf-shadow-sm:0 1px 0 rgba(11,31,36,.06);
  --hf-shadow-md:0 10px 30px -20px rgba(11,31,36,.40);
  --hf-shadow-lg:0 20px 50px -24px rgba(11,31,36,.45);
  --hf-border:1px solid var(--hf-hairline);
  --hf-border-total:2px solid var(--hf-ink);

  /* motion */
  --hf-dur-micro:160ms; --hf-dur-fast:220ms; --hf-dur-base:320ms; --hf-dur-chart:600ms; --hf-dur-countup:800ms;
  --hf-ease-out:cubic-bezier(0.16,1,0.3,1); --hf-ease-standard:cubic-bezier(0.4,0,0.2,1);

  /* layout */
  --hf-maxw:1080px; --hf-tool-maxw:560px; --hf-gutter:24px;

  /* background texture — the "ledger" grid. Light: faint ink lines. Kept <=0.06 alpha so
     text on the page stays AA. Dark theme overrides these to NEUTRAL WHITE (never teal). */
  --hf-grid-line:rgba(11,31,36,0.05); --hf-grid-strong:rgba(11,31,36,0.075); --hf-dot:rgba(11,31,36,0.06);
}

/* Dark theme — applies automatically by OS preference, and can be forced with [data-theme].
   Palette calibrated 2026-07-16: surface/canvas darkened and neutralized (was #0B0B0C/#161514
   with a residual green cast in the chart grid). New values keep the G-channel within 1 of the
   R/B mean, so no channel dominates. Text (--hf-ink #ECEAE6) on --hf-surface #060607 gives a
   ~19.5:1 contrast ratio, well over WCAG AA (4.5:1). Chart-grid and diverging-midpoint moved
   from #22322F (teal-tinted) to #232323 (neutral warm-gray). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --hf-ink:#ECEAE6; --hf-muted:#A3A29D; --hf-hairline:#1B1B1B; --hf-surface:#060607; --hf-canvas:#0D0D0E;
    --hf-teal:#4DAFA6; --hf-teal-dark:#3B9990; --hf-focus:#4DAFA6; --hf-teal-btn:#0C6E6B; --hf-loss:#E56A62;
    --hf-grid-line:rgba(255,255,255,0.028); --hf-grid-strong:rgba(255,255,255,0.05); --hf-dot:rgba(255,255,255,0.05);
    --hf-shadow-md:0 10px 30px -20px rgba(0,0,0,.75);
    --hf-shadow-lg:0 20px 50px -24px rgba(0,0,0,.85);
    --hf-dv-1:#3E9E95; --hf-dv-2:#5A93F2; --hf-dv-3-mark:#BE8340; --hf-dv-4:#9A7BEB; --hf-dv-5:#DC5A5A; --hf-dv-6:#7C8F8F;
    --hf-grid:#232323; --hf-axis:#7C8F8F; --hf-div-mid:#232323;
  }
}
:root[data-theme="dark"]{
  --hf-ink:#ECEAE6; --hf-muted:#A3A29D; --hf-hairline:#1B1B1B; --hf-surface:#060607; --hf-canvas:#0D0D0E;
  --hf-teal:#4DAFA6; --hf-teal-dark:#3B9990; --hf-focus:#4DAFA6; --hf-teal-btn:#0C6E6B; --hf-loss:#E56A62;
  --hf-grid-line:rgba(255,255,255,0.028); --hf-grid-strong:rgba(255,255,255,0.05); --hf-dot:rgba(255,255,255,0.05);
  --hf-shadow-md:0 10px 30px -20px rgba(0,0,0,.75);
  --hf-shadow-lg:0 20px 50px -24px rgba(0,0,0,.85);
  --hf-grid:#232323; --hf-div-mid:#232323;
}

/* Reduced motion — global kill switch (components also guard individually) */
@media (prefers-reduced-motion: reduce){
  :root{ --hf-dur-micro:0ms; --hf-dur-fast:0ms; --hf-dur-base:0ms; --hf-dur-chart:0ms; --hf-dur-countup:0ms; }
}