/* ==========================================================================
   ZONX PRISM — SPACING, RADII, BLUR, SHADOW, MOTION
   Geometry is sharp and professional: tight radii (6–10px), crisp edges.
   ========================================================================== */

:root {
  /* --- Spacing scale (4px base grid) --- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* --- Radii — kept tight for enterprise seriousness --- */
  --radius-xs: 4px;    /* chips, tags, micro */
  --radius-sm: 6px;    /* inputs, buttons, small controls */
  --radius-md: 8px;    /* cards, rows */
  --radius-lg: 10px;   /* panels, glass windows (max) */
  --radius-pill: 999px;/* avatars, pills, presence dots */

  /* --- Backdrop blur (the matte liquid glass) ---
     Tuned for a strong float: any glass laid over text/content must blur it
     out generously, so the surface reads as a thick lens hovering above. */
  --blur-soft: 10px;   /* hover rows, nested glass */
  --blur-panel: 18px;  /* core frosted windows/panels */
  --blur-heavy: 28px;  /* modals, command overlays, app shell */
  --blur-float: 40px;  /* free-floating bars/popovers over live text — max diffusion */

  /* --- Glass backdrop filter shorthands --- */
  --glass-filter: blur(var(--blur-panel)) saturate(135%);
  --glass-filter-heavy: blur(var(--blur-heavy)) saturate(140%);
  --glass-filter-float: blur(var(--blur-float)) saturate(150%);

  /* --- Shadow system (soft, diffuse — no harsh contrast) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.55);
  /* glass elevation: outer drop + top inner highlight + bottom inner shade */
  --shadow-glass:
    0 24px 64px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  --shadow-glass-soft:
    0 10px 30px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* float elevation — lifts a bar/popover clear off the content it blurs */
  --shadow-float:
    0 24px 60px -12px rgba(0, 0, 0, 0.66),
    0 8px 22px -8px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32);
  /* focus glow */
  --shadow-focus: 0 0 0 3px rgba(255, 176, 132, 0.28);
  --shadow-focus-neutral: 0 0 0 3px rgba(132, 176, 255, 0.26);

  /* --- Borders --- */
  --border-1: 1px solid var(--glass-edge);
  --border-strong: 1px solid var(--glass-edge-strong);

  /* --- Motion (calm, no bounce) --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */

  /* --- Z layers --- */
  --z-base: 0; /* @kind other */
  --z-raised: 10; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal: 2000; /* @kind other */
  --z-toast: 3000; /* @kind other */
}