/* 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, [data-theme] {
  /* ══════════════════════════════════════════════════════════════
     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);

}
