/* ==========================================================================
   ZONX PRISM — base layer: resets, body defaults, reusable glass utilities,
   and the simulated desktop backdrop used to demonstrate the app-shell blur.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-obsidian);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--brand-main-soft); color: var(--text-primary); }

/* --- Custom scrollbars (calm, thin) --- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.10) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.09);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); background-clip: content-box; }

/* ==========================================================================
   Simulated desktop backdrop — the "OS wallpaper" the Zonx shell frosts over.
   Use: <div class="zx-desktop"> … glass panels … </div>
   ========================================================================== */
.zx-desktop {
  position: relative;
  min-height: 100%;
  background-color: var(--bg-void);
  background-image:
    radial-gradient(46% 60% at 18% 12%, rgba(255, 176, 132, 0.22), transparent 60%),
    radial-gradient(50% 55% at 86% 22%, rgba(132, 176, 255, 0.20), transparent 62%),
    radial-gradient(60% 65% at 70% 92%, rgba(203, 176, 255, 0.16), transparent 60%),
    radial-gradient(48% 50% at 30% 88%, rgba(132, 255, 210, 0.12), transparent 60%),
    linear-gradient(160deg, #0A0E1A 0%, #05070D 60%, #080B14 100%);
  background-attachment: fixed;
}
/* faint dot grid for the desktop texture */
.zx-desktop::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  opacity: 0.5;
}

/* ==========================================================================
   Glass utilities — the matte liquid glass language.
   ========================================================================== */
.zx-glass {
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}
.zx-glass-soft {
  background: var(--glass-panel-soft);
  -webkit-backdrop-filter: blur(var(--blur-soft)) saturate(130%);
  backdrop-filter: blur(var(--blur-soft)) saturate(130%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
}
.zx-glass-heavy {
  background: var(--glass-panel-strong);
  -webkit-backdrop-filter: var(--glass-filter-heavy);
  backdrop-filter: var(--glass-filter-heavy);
  border: 1px solid var(--glass-edge-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}

/* Mono helper for data/metrics */
.zx-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   SYSTEM CANVAS — the adaptive desktop background system
   (installer screens, splash sequences, the main client backdrop)
   --------------------------------------------------------------------------
   LAYER 1 — Ambient backdrop. Native app frosts the real OS desktop; on web
   we can't see through to it, so we fake the depth: a heavily-blurred,
   slowly-shifting mesh in the deep corners + a soft rim glow hugging the outer
   edges for dimensional lighting. Use <div class="zx-ambient"> as the root.
   ========================================================================== */
.zx-ambient {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  background: var(--bg-void);
  overflow: hidden;
}
/* the blurred 'wallpaper' — extreme blur so it reads as a smooth ambient base */
.zx-ambient::before {
  content: "";
  position: absolute; inset: -14%;
  z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(38% 46% at 14% 10%, rgba(132, 176, 255, 0.24), transparent 60%),
    radial-gradient(40% 44% at 88% 16%, rgba(255, 170, 113, 0.17), transparent 62%),
    radial-gradient(48% 52% at 84% 94%, rgba(203, 176, 255, 0.18), transparent 60%),
    radial-gradient(44% 48% at 12% 90%, rgba(152, 235, 205, 0.13), transparent 60%),
    linear-gradient(155deg, #0A0E1A 0%, #05070D 58%, #080B14 100%);
  filter: blur(64px) saturate(125%);
}
/* rim-light vignette — fakes light wrapping the window edges */
.zx-ambient::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(140% 60% at 50% -8%, rgba(132, 176, 255, 0.10), transparent 55%),
    radial-gradient(140% 60% at 50% 108%, rgba(255, 170, 113, 0.06), transparent 55%);
  box-shadow:
    inset 0 0 140px 30px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* real content rides above both ambient pseudo-layers */
.zx-ambient > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .zx-ambient.is-live::before { animation: zxAmbientDrift 28s ease-in-out infinite alternate; }
  @keyframes zxAmbientDrift {
    from { transform: translate3d(-1.6%, -1.1%, 0) scale(1.05); }
    to   { transform: translate3d(1.6%, 1.3%, 0)  scale(1.09); }
  }
}

/* --------------------------------------------------------------------------
   LAYER 2 — The application-window shell. Matte liquid glass, heavier than
   .zx-glass-heavy: a massive backdrop-blur fill, an ultra-thin light-catching
   stroke, and a microscopic high-diffusion outer glow so light feels trapped
   and scattering inside the thickness of the glass.
   -------------------------------------------------------------------------- */
.zx-glass-shell {
  position: relative;
  background: var(--glass-panel-strong);
  -webkit-backdrop-filter: var(--glass-filter-heavy);
  backdrop-filter: var(--glass-filter-heavy);
  border: 1px solid var(--glass-edge-strong);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-xl),                          /* deep ambient drop */
    0 0 64px rgba(140, 170, 230, 0.07),        /* trapped-light outer glow */
    inset 0 1px 0 rgba(255, 255, 255, 0.10),   /* top light-catching edge */
    inset 0 0 0 1px rgba(255, 255, 255, 0.02), /* faint inner wall */
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);        /* bottom inner shade */
}
/* faux title-bar dots for an app window */
.zx-traffic { display: flex; gap: 8px; }
.zx-traffic > i {
  width: 11px; height: 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   ACCENT BACKLIGHT — a soft glow that diffuses smoothly BEHIND the matte glass
   when an interaction/process fires. Place as an absolute sibling inside a
   relative wrapper, before the glass element; the glass blurs it organically.
   Default papaya; override --zx-backlight-color for call-spectrum states.
   -------------------------------------------------------------------------- */
.zx-backlight {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 52%, var(--zx-backlight-color, var(--brand-main-glow)), transparent 72%);
  filter: blur(34px);
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .zx-backlight.is-pulsing { animation: zxBacklightPulse 3.6s ease-in-out infinite; }
  @keyframes zxBacklightPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 0.95; } }
}