/* Charts (chart_controller, ChartsHelper#chart_tag): a box of a set height
   the canvas fills, and the palette the controller draws with.

   shadcn/ui's chart palette (--chart-1…5, light and dark), as hex because
   Chart.js reads the computed color as plain RGB: its own categorical
   ramp, not the primary or the status colors, so a series never changes
   color with branding or reads as "this one is fine". Assign in order and
   never cycle: a sixth series folds into "Other". */
@layer components {
  .chart {
    --chart-1: light-dark(#f54a00, #1447e6);
    --chart-2: light-dark(#009689, #00bc7d);
    --chart-3: light-dark(#104e64, #fe9a00);
    --chart-4: light-dark(#ffb900, #ad46ff);
    --chart-5: light-dark(#fe9a00, #ff2056);
    --chart-ink: var(--muted-foreground);
    --chart-grid: var(--border);

    block-size: var(--chart-height, 16rem);
    inline-size: 100%;
    position: relative;
  }

  .chart--sm { --chart-height: 10rem; }
  .chart--lg { --chart-height: 20rem; }

  /* A KPI tile's trend line: no axes, a strip under the figure. */
  .chart--sparkline { --chart-height: 2.5rem; }
}