/* ═══════════════════════════════════════════════════════════════
   Semantic Color Tokens — The consumable API
   Components reference these, never primitives directly.
   All use light-dark() for scheme switching.

   Structure (per family):
     L2 — per-family tokens: bg, text, border, states
     L3 — short-alias matrix consumed by components: full
          state × role coverage wired to the L2 source.

   The state × role matrix every family honors:
                rest | hover | active | selected | disabled | invalid
     bg         •    •       •        •          •          •
     text       •    •       •        •          •          •
     border     •    •       •        •          •          •
   ═══════════════════════════════════════════════════════════════ */

/* ─── Data palette parameterization ───
   All 10 slots live in an analogous arc centered on --a-accent-hue,
   fanning out in alternating cool/warm pairs with a uniform step
   (--a-data-delta). Slot 0 is the anchor (accent hue). Slots 1-8 are
   symmetric pairs at ±1, ±2, ±3, ±4 × delta; slot 9 extends one more
   step on the warm side (+5 × delta).

   Offsets from --a-accent-hue:
     0: 0     1: −1Δ   2: +1Δ   3: −2Δ   4: +2Δ
     5: −3Δ   6: +3Δ   7: −4Δ   8: +4Δ   9: +5Δ

   Two axes of differentiation — hue (via delta) AND lightness (via a
   3-phase rotation keyed on N mod 3). Under CVD (deuteranopia/protanopia)
   the red-green axis collapses and same-L neighbors in the green-teal
   zone would converge; the L rotation rescues them by ensuring any three
   consecutive slots have three different L values.

   Tuning knobs:
     --a-data-delta     : hue step between consecutive pairs (default 22)
     --a-data-l-spread  : ±L offset for phases 1 and 2 (default 0.07)
     --a-data-l-light   : base L for phase-0 slots in light mode
     --a-data-l-dark    : base L for phase-0 slots in dark mode
     --a-data-c         : uniform chroma across all slots
     --a-data-N-hue     : pin an individual slot's hue absolutely

   At default accent=225, delta=22: slot 7 lands at 137 (8° from success
   hue 145) and slot 2 at 247 (3° from info hue 250). The L rotation
   places slot 2 in phase 2 (deeper) and slot 7 in phase 1 (lighter),
   so neither reads as its respective status token. */
@property --a-data-l-light  { syntax: "<number>"; inherits: true; initial-value: 0.55; }
@property --a-data-l-dark   { syntax: "<number>"; inherits: true; initial-value: 0.72; }
@property --a-data-l-spread { syntax: "<number>"; inherits: true; initial-value: 0.10; }
@property --a-data-c        { syntax: "<number>"; inherits: true; initial-value: 0.16; }
@property --a-data-delta    { syntax: "<number>"; inherits: true; initial-value: 22;   }
@property --a-data-0-hue    { syntax: "<number>"; inherits: true; initial-value: 225; }
@property --a-data-1-hue    { syntax: "<number>"; inherits: true; initial-value: 203; }
@property --a-data-2-hue    { syntax: "<number>"; inherits: true; initial-value: 247; }
@property --a-data-3-hue    { syntax: "<number>"; inherits: true; initial-value: 181; }
@property --a-data-4-hue    { syntax: "<number>"; inherits: true; initial-value: 269; }
@property --a-data-5-hue    { syntax: "<number>"; inherits: true; initial-value: 159; }
@property --a-data-6-hue    { syntax: "<number>"; inherits: true; initial-value: 291; }
@property --a-data-7-hue    { syntax: "<number>"; inherits: true; initial-value: 137; }
@property --a-data-8-hue    { syntax: "<number>"; inherits: true; initial-value: 313; }
@property --a-data-9-hue    { syntax: "<number>"; inherits: true; initial-value: 335; }

:root, theme-ui, [data-theme] {

  /* ══════════════════════════════════════════════════════════════
     CANVAS — Neutral text, borders, surfaces
     ══════════════════════════════════════════════════════════════ */

  /* L2 — family tokens */
  --a-canvas-strong:   light-dark(var(--a-neutral-50-tint), var(--a-neutral-60-shade));
  --a-canvas:          var(--a-neutral-50);
  --a-canvas-subtle:   light-dark(var(--a-neutral-20-tint), var(--a-neutral-30-shade));
  --a-canvas-muted:    light-dark(var(--a-neutral-10-tint), var(--a-neutral-15-shade));
  --a-canvas-hover:    light-dark(var(--a-neutral-60-tint), var(--a-neutral-60-shade));
  --a-canvas-active:   light-dark(var(--a-neutral-60-tint), var(--a-neutral-65-shade));
  --a-canvas-selected: light-dark(var(--a-neutral-45-tint), var(--a-neutral-50-shade));

  /* Text on neutral surfaces — low shade steps = dark text for light mode.
     Dark-mode tint spread widened: text→subtle gap 25→35 steps,
     subtle→disabled gap 10→15 steps, for clearer visual hierarchy. */
  /* Subtle + muted lifted one fine-step shade-side to clear WCAG AA
     4.5:1 on canvas-0/1/2 in both schemes. Subtle ↔ muted gap
     compresses from 10 to 5 step-fractions — visual hierarchy
     leans more on font-weight + size and less on shade contrast. */
  --a-canvas-text-strong:   light-dark(var(--a-neutral-05-shade), var(--a-neutral-05-tint));
  --a-canvas-text:          light-dark(var(--a-neutral-20-shade), var(--a-neutral-20-tint));
  --a-canvas-text-subtle:   light-dark(var(--a-neutral-35-shade), var(--a-neutral-35-tint));
  --a-canvas-text-muted:    light-dark(var(--a-neutral-50-shade), var(--a-neutral-50-tint));
  --a-canvas-text-disabled: light-dark(var(--a-neutral-65-shade), var(--a-neutral-65-tint));
  --a-canvas-text-inverse:  var(--a-neutral-10);

  /* Luminance-direction surfaces (always darken relative to canvas-0) */
  --a-canvas-well:    var(--a-canvas-1);   /* sunken panels, code blocks */
  --a-canvas-inset:   var(--a-canvas-0);   /* recessed inputs, wells */
  --a-canvas-pressed: var(--a-canvas-2);   /* pressed/active button states */

  /* Borders on neutral surfaces — adaptive scrims flip polarity per mode. */
  --a-canvas-border-subtle: var(--a-neutral-0-scrim);
  --a-canvas-border:        var(--a-neutral-2-scrim);
  --a-canvas-border-strong: var(--a-neutral-4-scrim);

  /* L3 — short-alias matrix (the consumable API for neutral surfaces) */
  --a-bg:              var(--a-canvas-0);
  --a-bg-scrim:        var(--a-canvas-0-scrim);
  --a-bg-subtle:       var(--a-canvas-1);
  --a-bg-muted:        var(--a-canvas-0-scrim);
  --a-bg-strong:       var(--a-canvas-3);
  --a-bg-hover:        var(--a-canvas-2);
  --a-bg-active:       var(--a-canvas-pressed);
  --a-bg-selected:     var(--a-canvas-0-scrim);
  --a-bg-disabled:     var(--a-canvas-muted);
  --a-bg-invalid:      var(--a-danger-muted);

  --a-fg:            var(--a-canvas-text);
  --a-fg-subtle:     var(--a-canvas-text-subtle);
  --a-fg-muted:      var(--a-canvas-text-muted);
  --a-fg-strong:     var(--a-canvas-text-strong);
  --a-fg-hover:      var(--a-canvas-text-strong);
  /* ADR-0028: --a-fg-{active,invalid} retired (zero consumers). Use
     `--a-ui-text-active` / `--a-ui-text-invalid` for form-control state,
     or define a per-primitive `--<comp>-fg-{active,invalid}` token. */
  --a-fg-selected:   var(--a-canvas-text-strong);
  --a-fg-disabled:   var(--a-canvas-text-disabled);
  --a-fg-inverse:    var(--a-canvas-text-inverse);

  --a-border:          var(--a-canvas-border);
  --a-border-subtle:   var(--a-canvas-border-subtle);
  --a-border-strong:   var(--a-canvas-border-strong);
  --a-border-hover:    var(--a-canvas-border-strong);
  /* ADR-0028: --a-border-{active,selected,disabled,invalid} retired (zero
     consumers). Per-primitive `--<comp>-border-{state}` is the override
     surface; `--a-focus-ring` carries focus-active borders for form
     controls. */

  /* ══════════════════════════════════════════════════════════════
     ACCENT — Interactive, links, focus (source for --a-primary-*)
     ══════════════════════════════════════════════════════════════ */

  /* L2 — family tokens */
  --a-accent-strong:   var(--a-accent-50);
  --a-accent:          var(--a-accent-50);
  --a-accent-subtle:   var(--a-accent-20);
  --a-accent-muted:    var(--a-accent-10);
  --a-accent-hover:    var(--a-accent-40);
  --a-accent-active:   var(--a-accent-60);
  --a-accent-selected: var(--a-accent-50);

  /* Link family — derived from accent steps deeper than --a-accent-strong
     (step-50) so links clear WCAG AA 4.5:1 on canvas-0/1/2 in both
     schemes. Anchor color in `typography.css` reads --a-link rather
     than --a-accent-strong; emphasis on hover comes from a tighter
     chroma + darker step rather than full saturation jump. */
  /* Polarity matches `--a-accent-N` family wrappers: at fine steps >50,
     `tint` is the lower-L (deeper) primitive and `shade` is the higher-L
     primitive — the naming inverts past the convergence point. Light
     mode wants dark-on-light, so we pick `tint` (deep accent); dark
     mode wants light-on-dark, so we pick `shade` (lifted accent). */
  --a-link:         light-dark(var(--a-accent-55-tint), var(--a-accent-55-shade));
  --a-link-hover:   light-dark(var(--a-accent-70-tint), var(--a-accent-70-shade));
  --a-link-visited: light-dark(var(--a-accent-65-tint), var(--a-accent-65-shade));

  /* Accent text on accent solid bg — needs light text on dark-ish accent */
  --a-accent-text-strong:   light-dark(var(--a-accent-05-shade), var(--a-accent-05-tint));
  --a-accent-text:          light-dark(var(--a-accent-10-shade), var(--a-accent-10-tint));
  --a-accent-text-subtle:   light-dark(var(--a-accent-30-shade), var(--a-accent-30-tint));
  --a-accent-text-disabled: light-dark(var(--a-accent-60-shade), var(--a-accent-60-tint));

  --a-accent-border-subtle: var(--a-accent-30);
  --a-accent-border:        var(--a-accent-45);
  --a-accent-border-strong: var(--a-accent-60);

  /* L3 — Primary (accent-filled — CTA buttons, checked controls) */
  --a-primary-bg:           var(--a-accent-strong);
  --a-primary-bg-hover:     var(--a-accent-hover);
  --a-primary-bg-active:    var(--a-accent-active);

  --a-primary-fg:           var(--a-accent-05-tint);
  --a-primary-fg-hover:     var(--a-accent-text-strong);

  --a-primary-border:           var(--a-accent-border);
  --a-primary-border-hover:     var(--a-accent-border-strong);

  /* Legacy shorthand — keep until all components migrate to --a-primary-* */
  --a-primary:       var(--a-primary-bg);
  --a-primary-hover: var(--a-primary-bg-hover);

  /* L3 — Accent surface role matrix (parallel to --a-primary-*, keeps the
     accent family addressable under its own name for components that want
     accent-hued surfaces without the "primary action" connotation). */
  --a-accent-bg:           var(--a-primary-bg);
  --a-accent-bg-hover:     var(--a-primary-bg-hover);
  --a-accent-bg-active:    var(--a-primary-bg-active);

  --a-accent-fg:           var(--a-primary-fg);
  --a-accent-fg-hover:     var(--a-primary-fg-hover);

  /* accent border is already defined at L2 (--a-accent-border*);
     L3 matches L2 since both resolve to the same scheme-aware value. */

  /* ══════════════════════════════════════════════════════════════
     BRAND — Non-interactive identity color
     ══════════════════════════════════════════════════════════════ */

  /* L2 — family tokens */
  --a-brand-strong:   var(--a-brand-70);
  --a-brand:          var(--a-brand-50);
  --a-brand-subtle:   var(--a-brand-40);
  --a-brand-muted:    var(--a-brand-30);
  --a-brand-hover:    var(--a-brand-60);
  --a-brand-active:   var(--a-brand-60);
  --a-brand-selected: var(--a-brand-40);

  --a-brand-text-strong:   light-dark(var(--a-brand-05-tint), var(--a-brand-05-tint));
  --a-brand-text:          light-dark(var(--a-brand-10-tint), var(--a-brand-10-tint));
  --a-brand-text-subtle:   light-dark(var(--a-brand-30-tint), var(--a-brand-30-tint));
  --a-brand-text-disabled: light-dark(var(--a-brand-60-shade), var(--a-brand-60-tint));

  --a-brand-border-subtle: var(--a-brand-30);
  --a-brand-border:        var(--a-brand-45);
  --a-brand-border-strong: var(--a-brand-60);

  /* L3 — Brand surface role matrix */
  --a-brand-bg:           var(--a-brand-strong);
  --a-brand-bg-hover:     var(--a-brand-hover);

  --a-brand-fg:           var(--a-brand-text-strong);
  --a-brand-fg-hover:     var(--a-brand-text-strong);

  /* L3 border state matrix — rest state is --a-brand-border (L2 above). */
  --a-brand-border-hover:    var(--a-brand-border-strong);

  /* ══════════════════════════════════════════════════════════════
     INFO
     ══════════════════════════════════════════════════════════════ */

  /* L2 — family tokens */
  --a-info-strong:   var(--a-info-50);
  --a-info:          var(--a-info-50);
  --a-info-subtle:   var(--a-info-20);
  --a-info-muted:    var(--a-info-10);
  --a-info-hover:    var(--a-info-40);
  --a-info-active:   var(--a-info-60);
  --a-info-selected: var(--a-info-50);

  --a-info-text-strong:   light-dark(var(--a-info-05-tint), var(--a-info-05-tint));
  --a-info-text:          light-dark(var(--a-info-20-shade), var(--a-info-20-tint));
  --a-info-text-subtle:   light-dark(var(--a-info-45-shade), var(--a-info-45-tint));
  --a-info-text-disabled: light-dark(var(--a-info-60-shade), var(--a-info-60-tint));

  --a-info-border-subtle: var(--a-info-30);
  --a-info-border:        var(--a-info-40);
  --a-info-border-strong: var(--a-info-60);

  /* L3 — Info surface role matrix */
  --a-info-bg:           var(--a-info-strong);
  --a-info-bg-hover:     var(--a-info-hover);

  --a-info-fg:           var(--a-info-text-strong);
  --a-info-fg-hover:     var(--a-info-text-strong);

  /* L3 border state matrix — rest state is --a-info-border (L2 above). */
  --a-info-border-hover:    var(--a-info-border-strong);

  /* ══════════════════════════════════════════════════════════════
     SUCCESS
     ══════════════════════════════════════════════════════════════ */

  /* L2 — family tokens */
  --a-success-strong:   var(--a-success-50);
  --a-success:          var(--a-success-50);
  --a-success-subtle:   var(--a-success-20);
  --a-success-muted:    var(--a-success-10);
  --a-success-hover:    var(--a-success-40);
  --a-success-active:   var(--a-success-60);
  --a-success-selected: var(--a-success-50);

  --a-success-text-strong:   light-dark(var(--a-success-05-tint), var(--a-success-05-tint));
  --a-success-text:          light-dark(var(--a-success-20-shade), var(--a-success-20-tint));
  --a-success-text-subtle:   light-dark(var(--a-success-45-shade), var(--a-success-45-tint));
  --a-success-text-disabled: light-dark(var(--a-success-60-shade), var(--a-success-60-tint));

  --a-success-border-subtle: var(--a-success-30);
  --a-success-border:        var(--a-success-40);
  --a-success-border-strong: var(--a-success-60);

  /* L3 — Success surface role matrix */
  --a-success-bg:           var(--a-success-strong);
  --a-success-bg-hover:     var(--a-success-hover);

  --a-success-fg:           var(--a-success-text-strong);
  --a-success-fg-hover:     var(--a-success-text-strong);

  /* L3 border state matrix — rest state is --a-success-border (L2 above). */
  --a-success-border-hover:    var(--a-success-border-strong);

  /* ══════════════════════════════════════════════════════════════
     WARNING
     ══════════════════════════════════════════════════════════════ */

  /* L2 — family tokens */
  --a-warning-strong:   var(--a-warning-50);
  --a-warning:          var(--a-warning-50);
  --a-warning-subtle:   var(--a-warning-20);
  --a-warning-muted:    var(--a-warning-10);
  --a-warning-hover:    var(--a-warning-40);
  --a-warning-active:   var(--a-warning-60);
  --a-warning-selected: var(--a-warning-50);

  /* warning is light-colored — text on warning fills should be dark */
  --a-warning-text-strong:   light-dark(var(--a-warning-10-shade), var(--a-warning-10-shade));
  --a-warning-text:          light-dark(var(--a-warning-20-shade), var(--a-warning-20-tint));
  --a-warning-text-subtle:   light-dark(var(--a-warning-45-shade), var(--a-warning-45-tint));
  --a-warning-text-disabled: light-dark(var(--a-warning-60-shade), var(--a-warning-60-tint));

  --a-warning-border-subtle: var(--a-warning-30);
  --a-warning-border:        var(--a-warning-40);
  --a-warning-border-strong: var(--a-warning-60);

  /* L3 — Warning surface role matrix */
  --a-warning-bg:           var(--a-warning-strong);
  --a-warning-bg-hover:     var(--a-warning-hover);

  --a-warning-fg:           var(--a-warning-text-strong);
  --a-warning-fg-hover:     var(--a-warning-text-strong);

  /* L3 border state matrix — rest state is --a-warning-border (L2 above). */
  --a-warning-border-hover:    var(--a-warning-border-strong);

  /* ══════════════════════════════════════════════════════════════
     DANGER
     ══════════════════════════════════════════════════════════════ */

  /* L2 — family tokens */
  --a-danger-strong:   var(--a-danger-50);
  --a-danger:          var(--a-danger-50);
  --a-danger-subtle:   var(--a-danger-20);
  --a-danger-muted:    var(--a-danger-10);
  --a-danger-hover:    var(--a-danger-40);
  --a-danger-active:   var(--a-danger-60);
  --a-danger-selected: var(--a-danger-50);

  /* text-strong: light text for use ON danger solid fills (both modes)
     text-default/subtle: dark text for use on neutral surfaces ABOUT danger */
  --a-danger-text-strong:   light-dark(var(--a-danger-05-tint), var(--a-danger-05-tint));
  --a-danger-text:          light-dark(var(--a-danger-20-shade), var(--a-danger-20-tint));
  --a-danger-text-subtle:   light-dark(var(--a-danger-45-shade), var(--a-danger-45-tint));
  --a-danger-text-disabled: light-dark(var(--a-danger-60-shade), var(--a-danger-60-tint));

  --a-danger-border-subtle: var(--a-danger-30);
  --a-danger-border:        var(--a-danger-40);
  --a-danger-border-strong: var(--a-danger-60);

  /* L3 — Danger surface role matrix */
  --a-danger-bg:           var(--a-danger-strong);
  --a-danger-bg-hover:     var(--a-danger-hover);

  --a-danger-fg:           var(--a-danger-text-strong);
  --a-danger-fg-hover:     var(--a-danger-text-strong);

  /* L3 border state matrix — rest state is --a-danger-border (L2 above). */
  --a-danger-border-hover:    var(--a-danger-border-strong);

  /* ══════════════════════════════════════════════════════════════
     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 = `--a-{family}-strong` (semantic step-50). 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-accent-bucket-0: light-dark(var(--a-accent-15-tint), var(--a-accent-85-shade));
  --a-accent-bucket-1: light-dark(var(--a-accent-30-tint), var(--a-accent-70-shade));
  --a-accent-bucket-2: var(--a-accent-strong);
  --a-accent-bucket-3: light-dark(var(--a-accent-65-tint), var(--a-accent-35-shade));
  --a-accent-bucket-4: light-dark(var(--a-accent-80-tint), var(--a-accent-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-strong);
  --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-strong);
  --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-strong);
  --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-strong);
  --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));

  /* ══════════════════════════════════════════════════════════════
     FOCUS — canonical ring recipe shared by all form controls
     ══════════════════════════════════════════════════════════════

     The ring is a dual-layer box-shadow: an inner "gap" the canvas
     color wide, then an outer ring the accent color wide. Tuning any
     of the scalar tokens below cascades to every component that
     consumes `--a-focus-ring`:

       --a-focus-width   — outer ring thickness
       --a-focus-offset  — inner gap thickness (distance from element
                           edge to ring)
       --a-focus-color   — ring color (default: accent-strong)
       --a-focus-bg      — gap color (default: the surface under the
                           control; normally matches --a-canvas-0)

     Invalid / error state uses the same geometry but a danger color
     via `--a-focus-ring-invalid`.

     Components must NOT hardcode 2px / 4px / accent hex in their CSS;
     consume either `--a-focus-ring` directly or an L3 alias like
     `--{component}-focus-ring: var(--a-focus-ring)` (the more common
     pattern — gives per-component override headroom without breaking
     the canonical default). */

  --a-focus-color:         var(--a-accent-strong);
  --a-focus-color-invalid: var(--a-danger);
  --a-focus-width:         2px;
  --a-focus-offset:        2px;
  --a-focus-bg:            var(--a-canvas-0);

  --a-focus-ring-shadow: 0 0 0 var(--a-focus-offset) var(--a-focus-bg),
    0 0 0 calc(var(--a-focus-offset) + var(--a-focus-width)) var(--a-focus-color);
  --a-focus-ring-shadow-invalid: 0 0 0 var(--a-focus-offset) var(--a-focus-bg),
    0 0 0 calc(var(--a-focus-offset) + var(--a-focus-width)) var(--a-focus-color-invalid);

  /* L3 — what components consume. */
  --a-ring:              var(--a-focus-color);
  --a-ring-invalid:      var(--a-focus-color-invalid);
  --a-focus-ring:        var(--a-focus-ring-shadow);
  --a-focus-ring-invalid: var(--a-focus-ring-shadow-invalid);

  /* ══════════════════════════════════════════════════════════════
     UI (FIELD) — Form input surfaces
     ══════════════════════════════════════════════════════════════ */

  --a-ui-bg:               var(--a-canvas-0-scrim);
  --a-ui-bg-hover:         var(--a-canvas-0-scrim);
  --a-ui-bg-active:        var(--a-canvas-0);
  --a-ui-bg-selected:      var(--a-canvas-0-scrim);
  --a-ui-bg-disabled:      var(--a-canvas-1);
  --a-ui-bg-invalid:       var(--a-danger-muted);

  --a-ui-text:             var(--a-fg-strong);
  --a-ui-text-hover:       var(--a-fg-strong);
  --a-ui-text-active:      var(--a-fg-strong);
  --a-ui-text-selected:    var(--a-fg-strong);
  --a-ui-text-placeholder: var(--a-fg-muted);
  --a-ui-text-subtle:      var(--a-fg-subtle);
  --a-ui-text-muted:       var(--a-fg-muted);
  --a-ui-text-disabled:    var(--a-fg-disabled);
  --a-ui-text-invalid:     var(--a-danger-text);

  --a-ui-border:           light-dark(var(--a-neutral-85-shade), var(--a-neutral-85-tint));
  --a-ui-border-hover:     light-dark(var(--a-neutral-75-shade), var(--a-neutral-75-tint));
  --a-ui-border-active:    var(--a-accent-50);
  --a-ui-border-selected:  var(--a-accent-50);
  --a-ui-border-disabled:  var(--a-neutral-30);
  --a-ui-border-invalid:   var(--a-danger-50);

  --a-ui-caret:            var(--a-accent-50);

  /* ══════════════════════════════════════════════════════════════
     HIGHLIGHT & SELECTION — Text-level emphasis
     ══════════════════════════════════════════════════════════════ */

  --a-highlight-strong:  var(--a-warning-30);
  --a-highlight:         var(--a-warning-20);
  --a-highlight-subtle:  var(--a-warning-10);
  --a-highlight-text:    var(--a-fg-strong);

  --a-selection-bg:      var(--a-accent-20);
  --a-selection-text:    var(--a-fg-strong);
  --a-selection-radius:  var(--a-space-1);

  /* ══════════════════════════════════════════════════════════════
     CHROME — Neutral overlays on arbitrary-color surfaces
     Theme-stable near-opaque white/black for UI chrome drawn on
     top of unpredictable content (color-picker thumbs, video
     controls, modal scrims). Do NOT theme-tint — chrome must read
     equally against red / blue / dark / light underlays.
     ══════════════════════════════════════════════════════════════ */

  --a-chrome-light:      var(--a-neutral-0-tint);
  --a-chrome-dark:       var(--a-neutral-0-shade);
  --a-chrome-border:      var(--a-chrome-light);
  --a-chrome-ring-subtle: oklch(0 0 0 / 0.3);
  --a-chrome-shadow-soft: oklch(0 0 0 / 0.2);
  --a-chrome-backdrop:    oklch(0 0 0 / 0.5);
  /* §230-bundle (v0.5.9): canonical badge-on-chrome pair — light text +
     dark semi-transparent surface. Used by primitives that overlay text
     on unpredictable backgrounds (swatch badges, video controls, color
     readouts). Must read against red / blue / dark / light underlays. */
  --a-chrome-fg:         var(--a-chrome-light);
  --a-chrome-bg:         oklch(0 0 0 / 0.4);

  /* ══════════════════════════════════════════════════════════════
     DATA PALETTE — 10 categorical series colors for charts

     All 10 slots are computed as offsets from --a-accent-hue via a
     single --a-data-delta step, so retuning accent or delta shifts the
     whole palette coherently. Slot 0 is the anchor (accent hue); slots
     1-8 alternate cool/warm at ±1..±4 × delta; slot 9 extends to +5Δ.

     Override --a-data-l-light / --a-data-l-dark / --a-data-c to retune
     the palette's tone, --a-data-delta to squeeze or spread the arc,
     or any --a-data-N-hue to pin an individual slot.
     ══════════════════════════════════════════════════════════════ */

  --a-data-0-hue: var(--a-accent-hue);
  --a-data-1-hue: calc(var(--a-accent-hue) - var(--a-data-delta) * 1);
  --a-data-2-hue: calc(var(--a-accent-hue) + var(--a-data-delta) * 1);
  --a-data-3-hue: calc(var(--a-accent-hue) - var(--a-data-delta) * 2);
  --a-data-4-hue: calc(var(--a-accent-hue) + var(--a-data-delta) * 2);
  --a-data-5-hue: calc(var(--a-accent-hue) - var(--a-data-delta) * 3);
  --a-data-6-hue: calc(var(--a-accent-hue) + var(--a-data-delta) * 3);
  --a-data-7-hue: calc(var(--a-accent-hue) - var(--a-data-delta) * 4);
  --a-data-8-hue: calc(var(--a-accent-hue) + var(--a-data-delta) * 4);
  --a-data-9-hue: calc(var(--a-accent-hue) + var(--a-data-delta) * 5);

  /* Three L phases — each slot's phase is (N mod 3). Two consecutive
     slots always differ in both hue AND lightness, and any three
     consecutive slots span all three L values, so no CVD-collapse
     pocket of same-L slots exists in the green-teal confusion zone. */
  --_data-l-light-0: var(--a-data-l-light);
  --_data-l-light-1: calc(var(--a-data-l-light) + var(--a-data-l-spread));
  --_data-l-light-2: calc(var(--a-data-l-light) - var(--a-data-l-spread));
  --_data-l-dark-0:  var(--a-data-l-dark);
  --_data-l-dark-1:  calc(var(--a-data-l-dark) + var(--a-data-l-spread));
  --_data-l-dark-2:  calc(var(--a-data-l-dark) - var(--a-data-l-spread));

  /* slot N uses L-phase (N mod 3): 0/3/6/9 → phase 0; 1/4/7 → phase 1; 2/5/8 → phase 2 */
  --a-data-0: light-dark(
    oklch(var(--_data-l-light-0) var(--a-data-c) var(--a-data-0-hue)),
    oklch(var(--_data-l-dark-0)  var(--a-data-c) var(--a-data-0-hue))
  );
  --a-data-1: light-dark(
    oklch(var(--_data-l-light-1) var(--a-data-c) var(--a-data-1-hue)),
    oklch(var(--_data-l-dark-1)  var(--a-data-c) var(--a-data-1-hue))
  );
  --a-data-2: light-dark(
    oklch(var(--_data-l-light-2) var(--a-data-c) var(--a-data-2-hue)),
    oklch(var(--_data-l-dark-2)  var(--a-data-c) var(--a-data-2-hue))
  );
  --a-data-3: light-dark(
    oklch(var(--_data-l-light-0) var(--a-data-c) var(--a-data-3-hue)),
    oklch(var(--_data-l-dark-0)  var(--a-data-c) var(--a-data-3-hue))
  );
  --a-data-4: light-dark(
    oklch(var(--_data-l-light-1) var(--a-data-c) var(--a-data-4-hue)),
    oklch(var(--_data-l-dark-1)  var(--a-data-c) var(--a-data-4-hue))
  );
  --a-data-5: light-dark(
    oklch(var(--_data-l-light-2) var(--a-data-c) var(--a-data-5-hue)),
    oklch(var(--_data-l-dark-2)  var(--a-data-c) var(--a-data-5-hue))
  );
  --a-data-6: light-dark(
    oklch(var(--_data-l-light-0) var(--a-data-c) var(--a-data-6-hue)),
    oklch(var(--_data-l-dark-0)  var(--a-data-c) var(--a-data-6-hue))
  );
  --a-data-7: light-dark(
    oklch(var(--_data-l-light-1) var(--a-data-c) var(--a-data-7-hue)),
    oklch(var(--_data-l-dark-1)  var(--a-data-c) var(--a-data-7-hue))
  );
  --a-data-8: light-dark(
    oklch(var(--_data-l-light-2) var(--a-data-c) var(--a-data-8-hue)),
    oklch(var(--_data-l-dark-2)  var(--a-data-c) var(--a-data-8-hue))
  );
  --a-data-9: light-dark(
    oklch(var(--_data-l-light-0) var(--a-data-c) var(--a-data-9-hue)),
    oklch(var(--_data-l-dark-0)  var(--a-data-c) var(--a-data-9-hue))
  );

  /* ══════════════════════════════════════════════════════════════
     SCRIMS — Role aliases. Map onto the 7-step adaptive scrim-0..6
     scale in scrims.css. Per-family semantic tiers (weak / default /
     strong / peak) live in surfaces.css.
     ══════════════════════════════════════════════════════════════ */

  --a-scrim-weak:    var(--a-neutral-1-shade-scrim);  /* 20% — hover wash */
  --a-scrim-toast:   var(--a-neutral-2-shade-scrim);  /* 30% — toast veil */
  --a-scrim-default: var(--a-neutral-3-shade-scrim);  /* 40% — generic overlay */
  --a-scrim-dialog:  var(--a-neutral-4-shade-scrim);  /* 50% — modal backdrop */
  --a-scrim-strong:  var(--a-neutral-6-shade-scrim);  /* 70% — heaviest veil */

  /* ══════════════════════════════════════════════════════════════
     STATUS COMPAT — Legacy status shortcuts used by existing
     components (button, chart, pipeline-status, timeline). Override
     the L2 "default" shade to match -strong so the pre-reorg visual
     behavior is preserved. Components should migrate to the L3
     matrix (--a-danger-bg, --a-success-fg, etc) over time.
     ══════════════════════════════════════════════════════════════ */

  --a-danger:     var(--a-danger-strong);
  --a-danger-fg:  var(--a-danger-text-strong);
  --a-success:    var(--a-success-strong);
  --a-success-fg: var(--a-success-text-strong);
}
