/* adia:semantic/color — semantic feature surfaces.
   FOCUS (canonical ring recipe), UI/FIELD (form input surfaces),
   HIGHLIGHT & SELECTION, and CHROME (neutral overlays on arbitrary
   backgrounds). Contiguous in the original source; split out of
   semantics.css (v0.6.48 reorg, ADR-0035). */

:root, theme-ui, [theme], theme-provider {
  /* ══════════════════════════════════════════════════════════════
     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).

     While the ring paints, the control's own border-color goes
     transparent (operator ruling 2026-07-16): the ring is the single
     focus affordance; a visible border under the ring double-draws
     the edge. */

  --a-focus-color:         var(--a-primary-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-bg-selected);
  --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);

  /* 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
     ══════════════════════════════════════════════════════════════ */

  /* 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-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);

  /* ══════════════════════════════════════════════════════════════
     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);

}
