@layer exsa.skins {

/* ============================================================
   LAYER 3 — SKIN: GLASS
   Frosted translucent surfaces.
   Link AFTER exsa.css (or the bundle) + your theme:
   <link rel="stylesheet" href="skins/glass.css">
   Token-only: every rule targets :root. The #fff mixes are the
   neutral glass highlight — every other color derives from the
   active theme via color-mix, so this composes with all 21 palettes
   and both forced modes.
   Crash rule: the blur value lives in --surface-backdrop and is
   consumed by components' surfaces — never apply it to elements
   that sit over animated content.
   ============================================================ */

:root {
  --surface-bg: color-mix(in srgb, var(--color-bg) 55%, transparent);
  --surface-bg-elevated: color-mix(in srgb, var(--color-bg) 78%, transparent);
  --surface-border: 1px solid color-mix(in srgb, #fff 25%, transparent);
  --surface-border-control: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
  --surface-radius: 16px;
  --border-radius: 16px; /* legacy small-element shape — matches the surface; typography: system sans */
  --surface-shadow-sm: 0 4px 16px color-mix(in srgb, var(--color-text) 8%, transparent);
  --surface-shadow-md: 0 8px 32px color-mix(in srgb, var(--color-text) 12%, transparent);
  --surface-shadow-lg: 0 16px 48px color-mix(in srgb, var(--color-text) 16%, transparent);
  --surface-shadow-side: 8px 0 32px color-mix(in srgb, var(--color-text) 10%, transparent);
  --surface-inset: inset 0 0 0 0 transparent; /* no-op — composable in shadow lists */
  --surface-backdrop: blur(12px) saturate(1.4);
  /* Preferred page backdrop — the aurora + ambient blobs, folded into one canvas. */
  --surface-canvas:
    radial-gradient(34rem 34rem at -10% -10%, color-mix(in srgb, var(--color-link) 26%, transparent), transparent 70%),
    radial-gradient(28rem 28rem at 110% 30%, color-mix(in srgb, var(--color-secondary) 22%, transparent), transparent 70%),
    radial-gradient(30rem 30rem at 30% 115%, color-mix(in srgb, var(--color-success) 18%, transparent), transparent 70%),
    radial-gradient(60rem 40rem at 15% -10%, color-mix(in srgb, var(--color-link) 16%, transparent), transparent 60%),
    radial-gradient(50rem 36rem at 110% 20%, color-mix(in srgb, var(--color-secondary) 14%, transparent), transparent 60%),
    radial-gradient(46rem 34rem at 50% 120%, color-mix(in srgb, var(--color-success) 10%, transparent), transparent 60%),
    var(--color-bg);
}

}