@adia-ai/web-components 0.0.1

package/styles/colors/semantics.css

@@ -0,0 +1,595 @@
+/* ═══════════════════════════════════════════════════════════════
+   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. */
+  --a-canvas-text-strong:   light-dark(var(--a-neutral-05-shade), var(--a-neutral-05-tint));
+  --a-canvas-text:          light-dark(var(--a-neutral-30-shade), var(--a-neutral-30-tint));
+  --a-canvas-text-subtle:   light-dark(var(--a-neutral-40-shade), var(--a-neutral-40-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-60-shade), var(--a-neutral-60-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-1-scrim);
+  --a-canvas-border:        var(--a-neutral-3-scrim);
+  --a-canvas-border-strong: var(--a-neutral-6-scrim);
+
+  /* L3 — short-alias matrix (the consumable API for neutral surfaces) */
+  --a-bg:              var(--a-canvas-0);
+  --a-bg-subtle:       var(--a-canvas-2);
+  --a-bg-muted:        var(--a-canvas-1);
+  --a-bg-strong:       var(--a-canvas-4);
+  --a-bg-hover:        var(--a-canvas-3);
+  --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);
+  --a-fg-active:     var(--a-canvas-text-strong);
+  --a-fg-selected:   var(--a-canvas-text-strong);
+  --a-fg-disabled:   var(--a-canvas-text-disabled);
+  --a-fg-invalid:    var(--a-danger-text);
+  --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);
+  --a-border-active:   var(--a-accent-border);
+  --a-border-selected: var(--a-accent-border);
+  --a-border-disabled: var(--a-canvas-border-subtle);
+  --a-border-invalid:  var(--a-danger-border);
+
+  /* ══════════════════════════════════════════════════════════════
+     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);
+
+  /* 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-bg-selected:  var(--a-accent-selected);
+  --a-primary-bg-disabled:  var(--a-accent-muted);
+  --a-primary-bg-invalid:   var(--a-danger-muted);
+
+  --a-primary-fg:           var(--a-accent-text-strong);
+  --a-primary-fg-hover:     var(--a-accent-text-strong);
+  --a-primary-fg-active:    var(--a-accent-text-strong);
+  --a-primary-fg-selected:  var(--a-accent-text-strong);
+  --a-primary-fg-disabled:  var(--a-accent-text-disabled);
+  --a-primary-fg-invalid:   var(--a-danger-text);
+
+  --a-primary-border:           var(--a-accent-border);
+  --a-primary-border-hover:     var(--a-accent-border-strong);
+  --a-primary-border-active:    var(--a-accent-border-strong);
+  --a-primary-border-selected:  var(--a-accent-border-strong);
+  --a-primary-border-disabled:  var(--a-accent-border-subtle);
+  --a-primary-border-invalid:   var(--a-danger-border);
+
+  /* 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-bg-selected:  var(--a-primary-bg-selected);
+  --a-accent-bg-disabled:  var(--a-primary-bg-disabled);
+  --a-accent-bg-invalid:   var(--a-primary-bg-invalid);
+
+  --a-accent-fg:           var(--a-primary-fg);
+  --a-accent-fg-hover:     var(--a-primary-fg-hover);
+  --a-accent-fg-active:    var(--a-primary-fg-active);
+  --a-accent-fg-selected:  var(--a-primary-fg-selected);
+  --a-accent-fg-disabled:  var(--a-primary-fg-disabled);
+  --a-accent-fg-invalid:   var(--a-primary-fg-invalid);
+
+  /* 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-bg-active:    var(--a-brand-active);
+  --a-brand-bg-selected:  var(--a-brand-selected);
+  --a-brand-bg-disabled:  var(--a-brand-muted);
+  --a-brand-bg-invalid:   var(--a-danger-muted);
+
+  --a-brand-fg:           var(--a-brand-text-strong);
+  --a-brand-fg-hover:     var(--a-brand-text-strong);
+  --a-brand-fg-active:    var(--a-brand-text-strong);
+  --a-brand-fg-selected:  var(--a-brand-text-strong);
+  --a-brand-fg-disabled:  var(--a-brand-text-disabled);
+  --a-brand-fg-invalid:   var(--a-danger-text);
+
+  /* L3 border state matrix — rest state is --a-brand-border (L2 above). */
+  --a-brand-border-hover:    var(--a-brand-border-strong);
+  --a-brand-border-active:   var(--a-brand-border-strong);
+  --a-brand-border-selected: var(--a-brand-border-strong);
+  --a-brand-border-disabled: var(--a-brand-border-subtle);
+  --a-brand-border-invalid:  var(--a-danger-border);
+
+  /* ══════════════════════════════════════════════════════════════
+     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-bg-active:    var(--a-info-active);
+  --a-info-bg-selected:  var(--a-info-selected);
+  --a-info-bg-disabled:  var(--a-info-muted);
+  --a-info-bg-invalid:   var(--a-danger-muted);
+
+  --a-info-fg:           var(--a-info-text-strong);
+  --a-info-fg-hover:     var(--a-info-text-strong);
+  --a-info-fg-active:    var(--a-info-text-strong);
+  --a-info-fg-selected:  var(--a-info-text-strong);
+  --a-info-fg-disabled:  var(--a-info-text-disabled);
+  --a-info-fg-invalid:   var(--a-danger-text);
+
+  /* L3 border state matrix — rest state is --a-info-border (L2 above). */
+  --a-info-border-hover:    var(--a-info-border-strong);
+  --a-info-border-active:   var(--a-info-border-strong);
+  --a-info-border-selected: var(--a-info-border-strong);
+  --a-info-border-disabled: var(--a-info-border-subtle);
+  --a-info-border-invalid:  var(--a-danger-border);
+
+  /* ══════════════════════════════════════════════════════════════
+     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-bg-active:    var(--a-success-active);
+  --a-success-bg-selected:  var(--a-success-selected);
+  --a-success-bg-disabled:  var(--a-success-muted);
+  --a-success-bg-invalid:   var(--a-danger-muted);
+
+  --a-success-fg:           var(--a-success-text-strong);
+  --a-success-fg-hover:     var(--a-success-text-strong);
+  --a-success-fg-active:    var(--a-success-text-strong);
+  --a-success-fg-selected:  var(--a-success-text-strong);
+  --a-success-fg-disabled:  var(--a-success-text-disabled);
+  --a-success-fg-invalid:   var(--a-danger-text);
+
+  /* L3 border state matrix — rest state is --a-success-border (L2 above). */
+  --a-success-border-hover:    var(--a-success-border-strong);
+  --a-success-border-active:   var(--a-success-border-strong);
+  --a-success-border-selected: var(--a-success-border-strong);
+  --a-success-border-disabled: var(--a-success-border-subtle);
+  --a-success-border-invalid:  var(--a-danger-border);
+
+  /* ══════════════════════════════════════════════════════════════
+     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-bg-active:    var(--a-warning-active);
+  --a-warning-bg-selected:  var(--a-warning-selected);
+  --a-warning-bg-disabled:  var(--a-warning-muted);
+  --a-warning-bg-invalid:   var(--a-danger-muted);
+
+  --a-warning-fg:           var(--a-warning-text-strong);
+  --a-warning-fg-hover:     var(--a-warning-text-strong);
+  --a-warning-fg-active:    var(--a-warning-text-strong);
+  --a-warning-fg-selected:  var(--a-warning-text-strong);
+  --a-warning-fg-disabled:  var(--a-warning-text-disabled);
+  --a-warning-fg-invalid:   var(--a-danger-text);
+
+  /* L3 border state matrix — rest state is --a-warning-border (L2 above). */
+  --a-warning-border-hover:    var(--a-warning-border-strong);
+  --a-warning-border-active:   var(--a-warning-border-strong);
+  --a-warning-border-selected: var(--a-warning-border-strong);
+  --a-warning-border-disabled: var(--a-warning-border-subtle);
+  --a-warning-border-invalid:  var(--a-danger-border);
+
+  /* ══════════════════════════════════════════════════════════════
+     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-bg-active:    var(--a-danger-active);
+  --a-danger-bg-selected:  var(--a-danger-selected);
+  --a-danger-bg-disabled:  var(--a-danger-muted);
+  --a-danger-bg-invalid:   var(--a-danger-muted);
+
+  --a-danger-fg:           var(--a-danger-text-strong);
+  --a-danger-fg-hover:     var(--a-danger-text-strong);
+  --a-danger-fg-active:    var(--a-danger-text-strong);
+  --a-danger-fg-selected:  var(--a-danger-text-strong);
+  --a-danger-fg-disabled:  var(--a-danger-text-disabled);
+  --a-danger-fg-invalid:   var(--a-danger-text);
+
+  /* L3 border state matrix — rest state is --a-danger-border (L2 above). */
+  --a-danger-border-hover:    var(--a-danger-border-strong);
+  --a-danger-border-active:   var(--a-danger-border-strong);
+  --a-danger-border-selected: var(--a-danger-border-strong);
+  --a-danger-border-disabled: var(--a-danger-border-subtle);
+  --a-danger-border-invalid:  var(--a-danger-border);
+
+  /* ══════════════════════════════════════════════════════════════
+     FOCUS
+     ══════════════════════════════════════════════════════════════ */
+
+  --a-focus-color:       var(--a-accent-strong);
+  --a-focus-width:       2px;
+  --a-focus-offset:      2px;
+  --a-focus-ring-shadow: 0 0 0 var(--a-focus-offset) var(--a-canvas-0),
+    0 0 0 calc(var(--a-focus-offset) + var(--a-focus-width)) var(--a-focus-color);
+
+  /* L3 */
+  --a-ring:         var(--a-focus-color);
+  --a-ring-invalid: var(--a-danger);
+  --a-focus-ring:   var(--a-focus-ring-shadow);
+
+  /* ══════════════════════════════════════════════════════════════
+     UI (FIELD) — Form input surfaces
+     ══════════════════════════════════════════════════════════════ */
+
+  --a-ui-bg:               var(--a-neutral-0-scrim);
+  --a-ui-bg-hover:         var(--a-neutral-2-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-subtle);
+  --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:       oklch(1 0 0);
+  --a-chrome-dark:        oklch(0 0 0);
+  --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);
+
+  /* ══════════════════════════════════════════════════════════════
+     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);
+}

package/styles/colors/surfaces.css

@@ -0,0 +1,43 @@
+/* ═══════════════════════════════════════════════════════════════
+   Color Surfaces — Scheme-aware neutral-surface aliases.
+   Raw tint/shade primitives live in primitives-{family}.css.
+   Scrim primitives (0-6 adaptive) live in scrims.css.
+   Neutral role aliases (--a-scrim-dialog etc.) live in semantics.css.
+   ═══════════════════════════════════════════════════════════════ */
+
+:root, theme-ui, [data-theme] {
+
+  /* ══════════════════════════════════════════════════════════════
+     Canvas — neutral surface, semantic alias of --a-neutral-{0-6}
+     Use for: page bg, cards, panels, popovers, dialogs (stacking).
+     ══════════════════════════════════════════════════════════════ */
+  --a-canvas-0: var(--a-neutral-0);
+  --a-canvas-1: var(--a-neutral-1);
+  --a-canvas-2: var(--a-neutral-2);
+  --a-canvas-3: var(--a-neutral-3);
+  --a-canvas-4: var(--a-neutral-4);
+  --a-canvas-5: var(--a-neutral-5);
+  --a-canvas-6: var(--a-neutral-6);
+
+  --a-canvas-0-scrim: var(--a-neutral-0-scrim);
+  --a-canvas-1-scrim: var(--a-neutral-1-scrim);
+  --a-canvas-2-scrim: var(--a-neutral-2-scrim);
+  --a-canvas-3-scrim: var(--a-neutral-3-scrim);
+  --a-canvas-4-scrim: var(--a-neutral-4-scrim);
+  --a-canvas-5-scrim: var(--a-neutral-5-scrim);
+  --a-canvas-6-scrim: var(--a-neutral-6-scrim);
+
+  /* ══════════════════════════════════════════════════════════════
+     Canvas luminance aliases — symmetric ramp around `base`.
+     Same perceptual direction in both modes: dimmest step is
+     darkest in light AND in dark; brightest step is lightest in both.
+     Use for: wells, insets, pressed states, sunken panels, code.
+     ══════════════════════════════════════════════════════════════ */
+  --a-canvas-dimmest:   light-dark(var(--a-neutral-6-tint), var(--a-neutral-0-shade));
+  --a-canvas-dimmer:    light-dark(var(--a-neutral-5-tint), var(--a-neutral-1-shade));
+  --a-canvas-dim:       light-dark(var(--a-neutral-4-tint), var(--a-neutral-2-shade));
+  --a-canvas-base:      light-dark(var(--a-neutral-3-tint), var(--a-neutral-3-shade));
+  --a-canvas-bright:    light-dark(var(--a-neutral-2-tint), var(--a-neutral-4-shade));
+  --a-canvas-brighter:  light-dark(var(--a-neutral-1-tint), var(--a-neutral-5-shade));
+  --a-canvas-brightest: light-dark(var(--a-neutral-0-tint), var(--a-neutral-6-shade));
+}