@adia-ai/web-components 0.7.27 → 0.8.0

package/styles/colors/semantics/data-viz.css

@@ -4,13 +4,13 @@
    registrations are global, so relocating them here is cascade-inert. */
 
 /* ─── Data palette parameterization ───
-   All 10 slots live in an analogous arc centered on --a-accent-hue,
+   All 10 slots live in an analogous arc centered on --a-primary-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:
+   Offsets from --a-primary-hue:
      0: 0     1: −1Δ   2: +1Δ   3: −2Δ   4: +2Δ
      5: −3Δ   6: +3Δ   7: −4Δ   8: +4Δ   9: +5Δ
 
@@ -52,7 +52,7 @@
   /* ══════════════════════════════════════════════════════════════
      DATA PALETTE — 10 categorical series colors for charts
 
-     All 10 slots are computed as offsets from --a-accent-hue via a
+     All 10 slots are computed as offsets from --a-primary-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Δ.
@@ -62,16 +62,16 @@
      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);
+  --a-data-0-hue: var(--a-primary-hue);
+  --a-data-1-hue: calc(var(--a-primary-hue) - var(--a-data-delta) * 1);
+  --a-data-2-hue: calc(var(--a-primary-hue) + var(--a-data-delta) * 1);
+  --a-data-3-hue: calc(var(--a-primary-hue) - var(--a-data-delta) * 2);
+  --a-data-4-hue: calc(var(--a-primary-hue) + var(--a-data-delta) * 2);
+  --a-data-5-hue: calc(var(--a-primary-hue) - var(--a-data-delta) * 3);
+  --a-data-6-hue: calc(var(--a-primary-hue) + var(--a-data-delta) * 3);
+  --a-data-7-hue: calc(var(--a-primary-hue) - var(--a-data-delta) * 4);
+  --a-data-8-hue: calc(var(--a-primary-hue) + var(--a-data-delta) * 4);
+  --a-data-9-hue: calc(var(--a-primary-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

package/styles/colors/semantics/features.css

@@ -30,7 +30,7 @@
      pattern — gives per-component override headroom without breaking
      the canonical default). */
 
-  --a-focus-color:         var(--a-accent-strong);
+  --a-focus-color:         var(--a-primary-strong);
   --a-focus-color-invalid: var(--a-danger);
   --a-focus-width:         2px;
   --a-focus-offset:        2px;
@@ -68,25 +68,43 @@
   --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);
+  /* Re-sourced 2026-07-14 (Material Phase 5): these used to read raw
+     fine/coarse primitives directly (--a-neutral-85-shade/-tint,
+     --a-primary-50, --a-danger-50), bypassing the semantic layer
+     entirely — meaning a focused/selected field border rendered a
+     DIFFERENT blue than a primary button once Phase 4 made --a-primary
+     static. Re-pointed to the already-static semantic tokens they were
+     always equivalent to pre-Phase-4 (`--a-primary-50` was bare
+     `--a-primary`'s own raw source; `--a-neutral-85-*` matched
+     `--a-border`'s own raw source). */
+  --a-ui-border:           var(--a-border);
+  --a-ui-border-hover:     var(--a-border-hover);
+  --a-ui-border-active:    var(--a-primary);
+  --a-ui-border-selected:  var(--a-primary);
+  --a-ui-border-disabled:  var(--md-sys-color-neutral-outline-disabled);
+  --a-ui-border-invalid:   var(--a-danger);
+
+  --a-ui-caret:            var(--a-primary);
 
   /* ══════════════════════════════════════════════════════════════
      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);
+  /* Re-sourced 2026-07-14 (Material Phase 5): the 3-tier ramp
+     (strong > default > subtle) now uses the static warning family's
+     own translucent container tiers (container-high > container >
+     container-low) instead of raw fine-scale primitives at steps
+     30/20/10 — matches the intent tier-for-tier (steps 30/20/10 were
+     warning's old border-subtle/subtle/muted anchors, now the same
+     roles' static equivalents). */
+  --a-highlight-strong:  var(--a-warning-subtle);
+  --a-highlight:         var(--a-warning-muted);
+  --a-highlight-subtle:  var(--md-sys-color-warning-container-low);
   --a-highlight-text:    var(--a-fg-strong);
 
-  --a-selection-bg:      var(--a-accent-20);
+  /* `--a-primary-20` was bare `--a-primary-subtle`'s own raw source
+     pre-Phase-4 — re-pointed to the now-static equivalent. */
+  --a-selection-bg:      var(--a-primary-subtle);
   --a-selection-text:    var(--a-fg-strong);
   --a-selection-radius:  var(--a-space-1);
 

package/styles/colors/surfaces.css

@@ -1,31 +1,41 @@
 /* ═══════════════════════════════════════════════════════════════
    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.
+
+   Re-sourced from --md-sys-color-neutral-* (2026-07-14, Material
+   "replace the computational layer" Phase 5): the static export
+   already ships this exact 7-tier shape twice — a mode-consistent
+   dimmest..brightest ladder and a mirrored lowest..highest ladder —
+   so this file is now a direct, name-preserving re-route, not a
+   re-derivation. Raw tint/shade primitives (still computed) live in
+   primitives-{family}.css, kept for the swatch display page only.
+   Neutral role aliases (--a-scrim-dialog etc.) live in
+   semantics/aliases.css.
    ═══════════════════════════════════════════════════════════════ */
 
 :root, theme-ui, [theme], theme-provider {
 
   /* ══════════════════════════════════════════════════════════════
-     Canvas — neutral surface, semantic alias of --a-neutral-{0-6}
+     Canvas — neutral surface, semantic alias of the static
+     dimmest→brightest ladder (canvas-0 = brightest/page-level in
+     light, darkest/page-level in dark — matches --a-bg exactly;
+     canvas-6 = the opposite extreme, deepest own-object tier).
      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: var(--md-sys-color-neutral-background);
+  --a-canvas-1: var(--md-sys-color-neutral-surface-low);
+  --a-canvas-2: var(--md-sys-color-neutral-surface);
+  --a-canvas-3: var(--md-sys-color-neutral-surface-high);
+  --a-canvas-4: var(--md-sys-color-neutral-surface-higher);
+  --a-canvas-5: var(--md-sys-color-neutral-surface-highest);
+  --a-canvas-6: var(--md-sys-color-neutral-container);
 
-  --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);
+  --a-canvas-0-scrim: var(--md-sys-color-neutral-scrim-weakest);
+  --a-canvas-1-scrim: var(--md-sys-color-neutral-scrim-weaker);
+  --a-canvas-2-scrim: var(--md-sys-color-neutral-scrim-weak);
+  --a-canvas-3-scrim: var(--md-sys-color-neutral-scrim);
+  --a-canvas-4-scrim: var(--md-sys-color-neutral-scrim-strong);
+  --a-canvas-5-scrim: var(--md-sys-color-neutral-scrim-stronger);
+  --a-canvas-6-scrim: var(--md-sys-color-neutral-scrim-strongest);
 
   /* ══════════════════════════════════════════════════════════════
      Canvas luminance aliases — symmetric ramp around `base`.
@@ -33,18 +43,18 @@
      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));
+  --a-canvas-dimmest:   var(--md-sys-color-neutral-surface-dimmest);
+  --a-canvas-dimmer:    var(--md-sys-color-neutral-surface-dimmer);
+  --a-canvas-dim:       var(--md-sys-color-neutral-surface-dim);
+  --a-canvas-base:      var(--md-sys-color-neutral-surface);
+  --a-canvas-bright:    var(--md-sys-color-neutral-surface-bright);
+  --a-canvas-brighter:  var(--md-sys-color-neutral-surface-brighter);
+  --a-canvas-brightest: var(--md-sys-color-neutral-surface-brightest);
 
-  --a-canvas-lowest:    light-dark(var(--a-neutral-0-tint), var(--a-neutral-0-shade));
-  --a-canvas-lower:     light-dark(var(--a-neutral-1-tint), var(--a-neutral-1-shade));
-  --a-canvas-low:       light-dark(var(--a-neutral-2-tint), var(--a-neutral-2-shade));
-  --a-canvas-high:      light-dark(var(--a-neutral-3-tint), var(--a-neutral-4-shade));
-  --a-canvas-higher:    light-dark(var(--a-neutral-4-tint), var(--a-neutral-5-shade));
-  --a-canvas-highest:   light-dark(var(--a-neutral-5-tint), var(--a-neutral-6-shade));
+  --a-canvas-lowest:    var(--md-sys-color-neutral-surface-lowest);
+  --a-canvas-lower:     var(--md-sys-color-neutral-surface-lower);
+  --a-canvas-low:       var(--md-sys-color-neutral-surface-low);
+  --a-canvas-high:      var(--md-sys-color-neutral-surface-high);
+  --a-canvas-higher:    var(--md-sys-color-neutral-surface-higher);
+  --a-canvas-highest:   var(--md-sys-color-neutral-surface-highest);
 }

package/styles/resets.css

@@ -65,7 +65,6 @@ body {
 
 img,
 picture,
-svg,
 video,
 canvas {
   display: block;
@@ -73,6 +72,21 @@ canvas {
   block-size: auto;
 }
 
+/* svg gets its own rule, WITHOUT max-inline-size/block-size — unlike
+   img/picture/video/canvas, an SVG has real spec behavior that makes that
+   pairing actively harmful: a zero-size viewport (which is exactly what
+   max-inline-size:100% computes to inside a zero-intrinsic-size ancestor —
+   the common `width:0;height:0;transform:scale(s)` pattern for a CSS-
+   scaled canvas/scene) makes the whole element NOT RENDER AT ALL, not
+   "render at 0 visual size" — a silent, hard-to-diagnose failure with no
+   console warning (consumer-reported, GH #224). Components that embed SVG
+   size it explicitly in their own scoped CSS (e.g. icon-ui sets width/
+   height on its inner svg directly) and are unaffected by this rule
+   either way. */
+svg {
+  display: block;
+}
+
 /* The `ul/ol[role="list"]` semantic-list opt-out moved to
    styles/type/elements.css (with the other element list defaults) during the
    @layer migration — it's an element-default refinement that must win by

package/styles/themes.css

@@ -34,7 +34,7 @@
   --a-neutral-hue:   225;
   --a-neutral-c-min: 0.010;
   --a-brand-hue:     225;
-  --a-accent-hue:    225;
+  --a-primary-hue:    225;
   --a-success-hue:   145;
   --a-warning-hue:   65;
   --a-danger-hue:    25;
@@ -49,12 +49,12 @@
   --a-neutral-hue:   210;
   --a-neutral-c-min: 0.020;
   --a-brand-hue:     200;
-  --a-accent-hue:    200;
+  --a-primary-hue:    200;
   --a-success-hue:   160;
   --a-warning-hue:   55;
   --a-danger-hue:    15;
   --a-info-hue:      190;
-  --a-accent-c-max:  0.20;
+  --a-primary-c-max:  0.20;
   --a-brand-c-max:   0.20;
   --a-radius-k:      1.5;
   --a-density:       1.1;
@@ -66,12 +66,12 @@
   --a-neutral-c-min: 0.018;
   --a-neutral-c-max: 0.030;
   --a-brand-hue:     140;
-  --a-accent-hue:    140;
+  --a-primary-hue:    140;
   --a-success-hue:   145;
   --a-warning-hue:   60;
   --a-danger-hue:    20;
   --a-info-hue:      180;
-  --a-accent-c-max:  0.14;
+  --a-primary-c-max:  0.14;
   --a-brand-c-max:   0.14;
   --a-radius-k:      0.5;
   --a-density:       0.9;
@@ -82,12 +82,12 @@
   --a-neutral-hue:   30;
   --a-neutral-c-min: 0.022;
   --a-brand-hue:     20;
-  --a-accent-hue:    20;
+  --a-primary-hue:    20;
   --a-success-hue:   145;
   --a-warning-hue:   50;
   --a-danger-hue:    10;
   --a-info-hue:      200;
-  --a-accent-c-max:  0.22;
+  --a-primary-c-max:  0.22;
   --a-brand-c-max:   0.22;
   --a-radius-k:      0.25;
   --a-density:       1.1;
@@ -98,12 +98,12 @@
   --a-neutral-hue:   280;
   --a-neutral-c-min: 0.018;
   --a-brand-hue:     270;
-  --a-accent-hue:    270;
+  --a-primary-hue:    270;
   --a-success-hue:   145;
   --a-warning-hue:   65;
   --a-danger-hue:    25;
   --a-info-hue:      220;
-  --a-accent-c-max:  0.15;
+  --a-primary-c-max:  0.15;
   --a-brand-c-max:   0.15;
   --a-radius-k:      2;
   --a-density:       1.1;
@@ -114,12 +114,12 @@
   --a-neutral-hue:   350;
   --a-neutral-c-min: 0.016;
   --a-brand-hue:     340;
-  --a-accent-hue:    340;
+  --a-primary-hue:    340;
   --a-success-hue:   145;
   --a-warning-hue:   55;
   --a-danger-hue:    15;
   --a-info-hue:      200;
-  --a-accent-c-max:  0.17;
+  --a-primary-c-max:  0.17;
   --a-brand-c-max:   0.17;
   --a-radius-k:      0.75;
   --a-density:       1;
@@ -131,12 +131,12 @@
   --a-neutral-c-min: 0.008;
   --a-neutral-c-max: 0.015;
   --a-brand-hue:     220;
-  --a-accent-hue:    220;
+  --a-primary-hue:    220;
   --a-success-hue:   145;
   --a-warning-hue:   65;
   --a-danger-hue:    25;
   --a-info-hue:      200;
-  --a-accent-c-max:  0.10;
+  --a-primary-c-max:  0.10;
   --a-brand-c-max:   0.10;
   --a-radius-k:      0.35;
   --a-density:       0.85;
@@ -148,12 +148,12 @@
   --a-neutral-hue:   250;
   --a-neutral-c-min: 0.020;
   --a-brand-hue:     240;
-  --a-accent-hue:    240;
+  --a-primary-hue:    240;
   --a-success-hue:   150;
   --a-warning-hue:   60;
   --a-danger-hue:    20;
   --a-info-hue:      210;
-  --a-accent-c-max:  0.22;
+  --a-primary-c-max:  0.22;
   --a-brand-c-max:   0.22;
   --a-radius-k:      1.25;
   --a-density:       1.1;

package/styles/colors/primitives-accent.css

@@ -1,89 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   Color Primitives — Accent (Fine Scale 05–95)
-   Tint: light-oriented (05 lightest → 95 darkest).
-   Shade: dark-oriented (05 darkest → 95 lightest).
-   Requires primitives-shared.css and parameters.css.
-   ═══════════════════════════════════════════════════════════════ */
-
-:root, theme-ui, [theme], theme-provider {
-  /* ── Accent tints (05 lightest → 95 darkest) ── */
-  --a-accent-05-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-05) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-10-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-10) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-15-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-15) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-15) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-20-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-20) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-20) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-25-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-25) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-25) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-30-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-30) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-30) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-35-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-35) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-35) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-40-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-40) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-40) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-45-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-45) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-45) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-50-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-50) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-50) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-55-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-55) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-55) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-60-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-60) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-60) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-65-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-65) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-65) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-70-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-70) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-70) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-75-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-75) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-75) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-80-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-80) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-80) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-85-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-85) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-85) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-90-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-90) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-90) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-95-tint: oklch(calc(var(--a-color-l-max) - var(--_sf-95) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-95) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-
-  /* ── Accent shades (05 darkest → 95 lightest) ── */
-  --a-accent-05-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-05) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-05) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-10-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-10) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-10) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-15-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-15) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-15) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-20-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-20) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-20) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-25-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-25) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-25) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-30-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-30) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-30) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-35-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-35) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-35) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-40-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-40) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-40) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-45-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-45) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-45) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-50-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-50) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-50) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-55-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-55) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-55) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-60-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-60) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-60) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-65-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-65) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-65) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-70-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-70) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-70) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-75-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-75) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-75) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-80-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-80) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-80) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-85-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-85) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-85) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-90-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-90) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-90) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-  --a-accent-95-shade: oklch(calc(var(--a-color-l-min) + var(--_sf-95) * (var(--a-color-l-max) - var(--a-color-l-min))) calc(var(--a-accent-c-min) + var(--_cf-95) * (var(--a-accent-c-max) - var(--a-accent-c-min))) var(--a-accent-hue));
-
-  /* ── Coarse surface scale (0-7, linear increment) ── */
-  --a-accent-0-tint: oklch(calc(var(--a-color-l-max) - 0 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-  --a-accent-1-tint: oklch(calc(var(--a-color-l-max) - 1 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-  --a-accent-2-tint: oklch(calc(var(--a-color-l-max) - 2 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-  --a-accent-3-tint: oklch(calc(var(--a-color-l-max) - 3 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-  --a-accent-4-tint: oklch(calc(var(--a-color-l-max) - 4 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-  --a-accent-5-tint: oklch(calc(var(--a-color-l-max) - 5 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-  --a-accent-6-tint: oklch(calc(var(--a-color-l-max) - 6 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-
-  --a-accent-0-shade: oklch(calc(var(--a-color-l-min) + 0 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-  --a-accent-1-shade: oklch(calc(var(--a-color-l-min) + 1 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-  --a-accent-2-shade: oklch(calc(var(--a-color-l-min) + 2 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-  --a-accent-3-shade: oklch(calc(var(--a-color-l-min) + 3 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-  --a-accent-4-shade: oklch(calc(var(--a-color-l-min) + 4 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-  --a-accent-5-shade: oklch(calc(var(--a-color-l-min) + 5 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-  --a-accent-6-shade: oklch(calc(var(--a-color-l-min) + 6 * var(--a-color-surface-increment)) var(--a-accent-c-min) var(--a-accent-hue));
-
-  /* ── Adaptive fine scale (light-dark) ── */
-  --a-accent-05: light-dark(var(--a-accent-05-tint), var(--a-accent-05-shade));
-  --a-accent-10: light-dark(var(--a-accent-10-tint), var(--a-accent-10-shade));
-  --a-accent-20: light-dark(var(--a-accent-20-tint), var(--a-accent-20-shade));
-  --a-accent-30: light-dark(var(--a-accent-30-tint), var(--a-accent-30-shade));
-  --a-accent-40: light-dark(var(--a-accent-40-tint), var(--a-accent-40-shade));
-  --a-accent-50: light-dark(var(--a-accent-50-tint), var(--a-accent-50-shade));
-  --a-accent-60: light-dark(var(--a-accent-60-tint), var(--a-accent-60-shade));
-  --a-accent-70: light-dark(var(--a-accent-70-tint), var(--a-accent-70-shade));
-  --a-accent-80: light-dark(var(--a-accent-80-tint), var(--a-accent-80-shade));
-  --a-accent-90: light-dark(var(--a-accent-90-tint), var(--a-accent-90-shade));
-  --a-accent-95: light-dark(var(--a-accent-95-tint), var(--a-accent-95-shade));
-
-  /* ── Adaptive coarse scale (light-dark) ── */
-  --a-accent-0: light-dark(var(--a-accent-0-tint), var(--a-accent-0-shade));
-  --a-accent-1: light-dark(var(--a-accent-1-tint), var(--a-accent-1-shade));
-  --a-accent-2: light-dark(var(--a-accent-2-tint), var(--a-accent-2-shade));
-  --a-accent-3: light-dark(var(--a-accent-3-tint), var(--a-accent-3-shade));
-  --a-accent-4: light-dark(var(--a-accent-4-tint), var(--a-accent-4-shade));
-  --a-accent-5: light-dark(var(--a-accent-5-tint), var(--a-accent-5-shade));
-  --a-accent-6: light-dark(var(--a-accent-6-tint), var(--a-accent-6-shade));
-}