/* ═══════════════════════════════════════════════════════════════
   Color Surfaces — Scheme-aware neutral-surface aliases.

   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 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(--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(--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`.
     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:   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:    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);
}
