/* adia:semantic/color — sequential data-vis buckets (5-step per family).
   Distinct from --a-data-0..9 (categorical): buckets are 5 ordered steps
   within ONE family for heatmap/choropleth/treemap intensity.
   Split out of semantics.css (v0.6.48 reorg, ADR-0035).

   DELIBERATELY STAYS COMPUTED (2026-07-14, Material "replace the
   computational layer" Phase 5 investigation): a sequential 5-step
   perceptually-uniform ramp needs a continuous scale, which the
   static export doesn't ship per family — it ships ~12 discrete,
   purpose-built named roles (hover/active/container/dim/bright/low/
   high), several of which flip direction between light and dark scheme
   (tuned for on-surface emphasis, not sequential intensity) and would
   produce a non-monotonic, uneven ramp if forced into this shape. Same
   reasoning as `data-viz.css`'s categorical palette staying computed.
   `bucket-2`'s anchor is now the raw coarse primitive directly
   (`--a-{family}-60`, matching what `--a-{family}-strong` aliased
   before Phase 4 made that semantic token static) rather than the
   now-static `--a-{family}-strong` — keeps all 5 steps on the same
   computed OKLCH ramp instead of one static outlier surrounded by
   computed neighbors. */

:root, theme-ui, [theme], theme-provider {
  /* ══════════════════════════════════════════════════════════════
     BUCKETS — sequential 5-step ramp per family for data-vis consumers

     Distinct from `--a-data-0..9` (categorical, distinct hues) — buckets
     are 5 steps within ONE family, ordered low → high. Used by sequential
     data-vis surfaces (heatmap-ui, choropleth, treemap intensity).

     Anchor: bucket-2 = the raw `--a-{family}-60` coarse primitive. Steps
     0 and 1 sit lighter (toward muted); steps 3 and 4 sit deeper (toward
     active). Light/dark scheme polarity is honored via `light-dark()` —
     in light mode the lighter primitives are step-tints, in dark mode
     the lighter primitives are step-shades, so "low intensity" reads
     as low contrast against canvas-0 in either scheme.

     Coordinate with chart palette: `--a-data-N` are categorical (10 hue
     slots fanning out from accent-hue); buckets stay within one family
     so a heatmap colored `[color="success"]` doesn't drift through the
     accent → success → warning hue arc. Five steps were chosen so the
     ramp fits within WCAG AA against `--a-canvas-0` at the high end and
     remains visually distinguishable at the low end.
     ══════════════════════════════════════════════════════════════ */

  /* Accent buckets */
  --a-primary-bucket-0: light-dark(var(--a-primary-15-tint), var(--a-primary-85-shade));
  --a-primary-bucket-1: light-dark(var(--a-primary-30-tint), var(--a-primary-70-shade));
  --a-primary-bucket-2: var(--a-primary-60);
  --a-primary-bucket-3: light-dark(var(--a-primary-65-tint), var(--a-primary-35-shade));
  --a-primary-bucket-4: light-dark(var(--a-primary-80-tint), var(--a-primary-20-shade));

  /* Success buckets */
  --a-success-bucket-0: light-dark(var(--a-success-15-tint), var(--a-success-85-shade));
  --a-success-bucket-1: light-dark(var(--a-success-30-tint), var(--a-success-70-shade));
  --a-success-bucket-2: var(--a-success-60);
  --a-success-bucket-3: light-dark(var(--a-success-65-tint), var(--a-success-35-shade));
  --a-success-bucket-4: light-dark(var(--a-success-80-tint), var(--a-success-20-shade));

  /* Warning buckets */
  --a-warning-bucket-0: light-dark(var(--a-warning-15-tint), var(--a-warning-85-shade));
  --a-warning-bucket-1: light-dark(var(--a-warning-30-tint), var(--a-warning-70-shade));
  --a-warning-bucket-2: var(--a-warning-60);
  --a-warning-bucket-3: light-dark(var(--a-warning-65-tint), var(--a-warning-35-shade));
  --a-warning-bucket-4: light-dark(var(--a-warning-80-tint), var(--a-warning-20-shade));

  /* Danger buckets */
  --a-danger-bucket-0: light-dark(var(--a-danger-15-tint), var(--a-danger-85-shade));
  --a-danger-bucket-1: light-dark(var(--a-danger-30-tint), var(--a-danger-70-shade));
  --a-danger-bucket-2: var(--a-danger-60);
  --a-danger-bucket-3: light-dark(var(--a-danger-65-tint), var(--a-danger-35-shade));
  --a-danger-bucket-4: light-dark(var(--a-danger-80-tint), var(--a-danger-20-shade));

  /* Info buckets */
  --a-info-bucket-0: light-dark(var(--a-info-15-tint), var(--a-info-85-shade));
  --a-info-bucket-1: light-dark(var(--a-info-30-tint), var(--a-info-70-shade));
  --a-info-bucket-2: var(--a-info-60);
  --a-info-bucket-3: light-dark(var(--a-info-65-tint), var(--a-info-35-shade));
  --a-info-bucket-4: light-dark(var(--a-info-80-tint), var(--a-info-20-shade));

}
