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

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

  /* ══════════════════════════════════════════════════════════════
     Canvas — neutral surface, semantic alias of --a-neutral-{0-6}
     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-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);

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