/* ==========================================================================
   WellWave — Spacing, Radius, Elevation, Z-index
   --------------------------------------------------------------------------
   8px grid (4px micro). 7-level radius hierarchy — parent radius ALWAYS ≥
   child radius (Container 24 → Card 20 → Item 14 → Pill 6). Off-scale values
   (8/12/16/18px) are forbidden. Shadows are multi-layer and soft.
   ========================================================================== */

:root {
  /* ── Spacing — 8px grid ───────────────────────────────────────── */
  --ww-space-0: 0px;
  --ww-space-1: 8px;
  --ww-space-2: 16px;
  --ww-space-3: 24px;
  --ww-space-4: 32px;
  --ww-space-5: 40px;
  --ww-space-6: 48px;
  --ww-space-8: 64px;
  --ww-space-10: 80px;
  --ww-space-12: 96px;
  --ww-space-16: 128px;
  --ww-space-20: 160px;
  --ww-space-24: 192px;

  /* ── Radius — 7-level hierarchy ──────────────────────────────── */
  --ww-radius-xs: 6px;     /* micro pills, toggles, chips */
  --ww-radius-sm: 10px;    /* inputs, small buttons */
  --ww-radius-md: 14px;    /* badges, list items */
  --ww-radius-lg: 20px;    /* cards, containers */
  --ww-radius-xl: 24px;    /* modals, sections */
  --ww-radius-2xl: 32px;   /* hero cards, primary areas */
  --ww-radius-full: 9999px;/* pill buttons, avatars */
  /* Glass-specific radii */
  --ww-radius-glass-sm: 14px;
  --ww-radius-glass-md: 16px;
  --ww-radius-glass-lg: 24px;

  /* Public aliases */
  --radius-sm: var(--ww-radius-sm);
  --radius-md: var(--ww-radius-md);
  --radius-lg: var(--ww-radius-lg);
  --radius-xl: var(--ww-radius-xl);
  --radius-2xl: var(--ww-radius-2xl);
  --radius-full: var(--ww-radius-full);

  /* ── Elevation — soft multi-layer drop shadows (LIGHT) ───────── */
  --ww-shadow-l0: 0 1px 2px rgb(0 0 0 / 0.03), 0 2px 8px rgb(0 0 0 / 0.05);
  --ww-shadow-l1: 0 1px 3px rgb(0 0 0 / 0.04), 0 4px 14px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.04);
  --ww-shadow-l2: 0 2px 4px rgb(0 0 0 / 0.03), 0 6px 18px rgb(0 0 0 / 0.06), 0 14px 36px rgb(0 0 0 / 0.06);
  --ww-shadow-l3: 0 2px 6px rgb(0 0 0 / 0.04), 0 10px 28px rgb(0 0 0 / 0.08), 0 20px 48px rgb(0 0 0 / 0.06);
  --ww-shadow-l4: 0 4px 8px rgb(0 0 0 / 0.04), 0 14px 36px rgb(0 0 0 / 0.08), 0 28px 60px rgb(0 0 0 / 0.08);
  --ww-shadow-product: 0 5px 30px rgb(0 0 0 / 0.22); /* photographic product imagery only */

  /* CTA glow (clinical blue) */
  --ww-shadow-cta: 0 12px 32px -14px rgb(0 112 235 / 0.6), 0 4px 12px -6px rgb(0 112 235 / 0.4);

  /* Public shadow aliases */
  --shadow-sm: var(--ww-shadow-l1);
  --shadow-md: var(--ww-shadow-l2);
  --shadow-lg: var(--ww-shadow-l3);
  --shadow-xl: var(--ww-shadow-l4);

  /* ── Z-index ladder ──────────────────────────────────────────── */
  --ww-z-base: 1; /* @kind other */
  --ww-z-raised: 10; /* @kind other */
  --ww-z-sticky: 50; /* @kind other */
  --ww-z-overlay: 100; /* @kind other */
  --ww-z-modal: 500; /* @kind other */
  --ww-z-toast: 800; /* @kind other */
  --ww-z-tooltip: 900; /* @kind other */
}

/* Shadows deepen on dark surfaces. */
:root[data-theme='dark'],
:root.dark {
  --ww-shadow-l0: 0 4px 12px rgb(0 0 0 / 0.22);
  --ww-shadow-l1: 0 10px 24px rgb(0 0 0 / 0.3);
  --ww-shadow-l2: 0 14px 30px rgb(0 0 0 / 0.34);
  --ww-shadow-l3: 0 18px 38px rgb(0 0 0 / 0.4);
  --ww-shadow-l4: 0 22px 46px rgb(0 0 0 / 0.48);
  --ww-shadow-cta: 0 12px 34px -12px rgb(52 192 228 / 0.55), 0 4px 14px -6px rgb(52 192 228 / 0.4);
}