/* =============================================================================
   LAYER 3 — CHART TOKENS
   -----------------------------------------------------------------------------
   ONE colour per analytics metric, used by every card, legend, bar, line, slice,
   KPI figure and tooltip — so a metric never changes colour between charts.
   domain/analytics.ts reads these and nothing else; no chart file may define a
   colour of its own.

   Two constraints shape the values, and they are why the series are not simply
   `var(--color-secondary)` and `var(--color-primary)`:

   1. A filled mark is a graphical object and must clear 3:1 against the card it
      sits on (WCAG 1.4.11). The brand navy clears that easily, but sits too
      close to the teal in LIGHTNESS, so "redirected" takes a lifted navy step
      rather than the brand hue itself.
   2. Two series of equal LIGHTNESS collapse into one grey when printed or seen
      with a colour vision deficiency. Teal and blue are adjacent in hue, which
      makes this the load-bearing constraint here — the two are held ≥1.4:1
      apart in luminance so they stay tellable apart with no colour at all. Legends, direct labels and the per-chart data tables carry the
      meaning regardless of colour.
============================================================================= */

:root,
[data-theme="light"],
.app-root.theme-light {
  /* series — AI-handled is the secondary teal, redirected is the brand blue */
  --chart-ai-handled: var(--teal-700);
  --chart-ai-handled-ink: var(--teal-800);   /* KPI figures and legend values */
  --chart-ai-handled-soft: var(--teal-50);   /* legend washes, area fills */

  --chart-redirected: var(--azure-400);
  --chart-redirected-ink: var(--azure-700);
  --chart-redirected-soft: var(--azure-50);

  --chart-total: var(--slate-500);
  --chart-total-ink: var(--slate-700);
  --chart-total-soft: var(--slate-100);

  /* frame */
  --chart-grid: var(--border-subtle);
  --chart-axis: var(--text-muted);
  --chart-tooltip-bg: var(--surface-elevated);
  --chart-tooltip-border: var(--border-default);
  --chart-tooltip-fg: var(--text-primary);
  --chart-empty-bg: var(--surface-sunken);
}

[data-theme="dark"],
.app-root.theme-dark {
  /* The same three roles, lifted for a dark card. The luminance ordering is
     preserved (teal below blue below neutral) so a reader who learned the
     chart in light mode reads it the same way in dark. */
  --chart-ai-handled: var(--teal-400);
  --chart-ai-handled-ink: #62d4dd;
  --chart-ai-handled-soft: #103038;

  --chart-redirected: #8fbdf0;
  --chart-redirected-ink: #b9d5f7;
  --chart-redirected-soft: #142433;

  --chart-total: #c2cdd9;
  --chart-total-ink: #eef3f9;
  --chart-total-soft: #232f3c;

  --chart-grid: var(--border-subtle);
  --chart-axis: var(--text-muted);
  --chart-tooltip-bg: var(--surface-elevated);
  --chart-tooltip-border: var(--border-default);
  --chart-tooltip-fg: var(--text-primary);
  --chart-empty-bg: var(--surface-sunken);
}