/* ============================================================================
   WebPros Design System — SPACING, RADIUS, ELEVATION & Z-INDEX TOKENS
   4px base grid. 10px base radius. Flat by default — depth is the one-step
   surface lift + hairline borders; shadows are whisper-quiet and rare.
   ========================================================================== */

:root {
  /* ---- Spacing (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;
  --space-24: 96px;

  /* ---- Radius (10px base; xs..2xl derive) ------------------------------- */
  --radius: 0.625rem;                       /* 10px base */
  --radius-xs:  calc(var(--radius) - 6px);  /* 4px  */
  --radius-sm:  calc(var(--radius) - 4px);  /* 6px  */
  --radius-md:  calc(var(--radius) - 2px);  /* 8px  — controls */
  --radius-lg:  var(--radius);              /* 10px — inner surfaces */
  --radius-xl:  calc(var(--radius) + 4px);  /* 14px — cards */
  --radius-2xl: calc(var(--radius) + 12px); /* 22px */
  --radius-full: 999px;

  /* ---- Elevation — soft, cool, low-spread (Vercel/Linear feel) ----------
     Shadows exist ONLY for genuinely floating layers. A resting card uses the
     border, not a shadow. Dark-theme variants are overridden per theme below. */
  --shadow-xs: 0 1px 2px 0 oklch(0.21 0.02 286 / 0.05);
  --shadow-sm: 0 1px 2px -1px oklch(0.21 0.02 286 / 0.08), 0 1px 3px 0 oklch(0.21 0.02 286 / 0.06);
  --shadow-md: 0 2px 4px -2px oklch(0.21 0.02 286 / 0.08), 0 4px 10px -2px oklch(0.21 0.02 286 / 0.08);
  --shadow-lg: 0 8px 16px -6px oklch(0.21 0.02 286 / 0.10), 0 12px 28px -8px oklch(0.21 0.02 286 / 0.10);
  --shadow-xl: 0 16px 32px -10px oklch(0.21 0.02 286 / 0.14), 0 24px 56px -12px oklch(0.21 0.02 286 / 0.14);
  --ring-shadow: 0 0 0 3px oklch(0.585 0.186 292 / 0.32);

  /* ---- z-index scale ---------------------------------------------------- */
  --z-base: 1; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-drawer: 200; /* @kind other */
  --z-overlay: 300; /* @kind other */
  --z-modal: 400; /* @kind other */
  --z-popover: 500; /* @kind other */
  --z-toast: 600; /* @kind other */
}

[data-theme="dark"] {
  --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.30);
  --shadow-sm: 0 1px 2px -1px oklch(0 0 0 / 0.40), 0 1px 3px 0 oklch(0 0 0 / 0.30);
  --shadow-md: 0 2px 4px -2px oklch(0 0 0 / 0.40), 0 4px 10px -2px oklch(0 0 0 / 0.40);
  --shadow-lg: 0 8px 16px -6px oklch(0 0 0 / 0.50), 0 12px 28px -8px oklch(0 0 0 / 0.45);
  --shadow-xl: 0 16px 32px -10px oklch(0 0 0 / 0.60), 0 24px 56px -12px oklch(0 0 0 / 0.55);
  --ring-shadow: 0 0 0 3px oklch(0.715 0.140 294 / 0.40);
}