/* adia:semantic/color — core semantic color aliases (L2 + L3).
   The consumable API: canvas (neutral fg/bg/border), accent, brand, and
   the four status families (info/success/warning/danger). Split out of
   the 636-line semantics.css (v0.6.48 reorg, ADR-0035); imported FIRST by
   the semantics.css barrel so the status-compat overrides in aliases.css
   (imported last) still win, exactly as in the original source order. */

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

  /* ══════════════════════════════════════════════════════════════
     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-60);
  --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);
  --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-60);
  --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);
  --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-60);
  --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);
  --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-60);
  --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);
  --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-60);
  --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` deliberately diverges from `--a-warning-strong`
     (still the L2 saturated mid-tone, used as a fg/icon color by
     alert / chart / code / empty-state / agent-trace). Surfaces using
     `-bg` pair it with the dark `--a-warning-fg` (= -text-strong =
     -10-shade); `-strong` + `-fg` gave muddy brown-on-brown chips
     (pre-v0.6.36 user report on <tag-ui variant="warning">).
     `--a-warning-20-tint` is bright in both schemes (lightness math
     is scheme-independent) so warning surfaces keep the same
     caution-tape look in light + dark mode. */
  --a-warning-bg:           var(--a-warning);
  --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-60);
  --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);
  --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);

}
