/*
 * Webmoz design tokens (Phase 2)
 * Semantic colors are finalized in theme-dark / theme-light.
 */
:root {
  /* Spacing */
  --wm-space-1: 4px;
  --wm-space-2: 8px;
  --wm-space-3: 12px;
  --wm-space-4: 16px;
  --wm-space-5: 20px;
  --wm-space-6: 24px;
  --wm-space-7: 32px;
  --wm-space-8: 40px;

  /* Radii */
  --wm-radius-xs: 4px;
  --wm-radius-sm: 6px;
  --wm-radius-md: 10px;
  --wm-radius-lg: 16px;
  --wm-radius-xl: 20px;
  --wm-radius-pill: 999px;

  /* Shadows (structure — themed tints applied in theme files where needed) */
  --wm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
  --wm-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.18);
  --wm-shadow-glow-accent: 0 0 12px rgba(99, 102, 241, 0.25);

  /* Motion */
  --wm-duration-instant: 0.1s;
  --wm-duration-fast: 0.15s;
  --wm-duration-med: 0.25s;
  --wm-duration-slow: 0.35s;
  --wm-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --wm-ease-in-out: ease;

  /* stacking */
  --wm-z-sidebar: 1005;
  --wm-z-modal: 1000;
  --wm-z-modal-chrome: 1001;
  --wm-z-dock: 1200;
  --wm-z-tooltip: 10005;
  --wm-z-popover: 100000;

  /* Semantic defaults (dark-adjacent; themes override) */
  --wm-color-page: #05060a;
  --wm-color-surface-0: rgba(20, 20, 35, 0.4);
  --wm-color-surface-1: rgba(20, 20, 35, 0.2);
  --wm-color-surface-elevated: rgb(20 24 38 / 72%);
  --wm-color-text: rgba(255, 255, 255, 0.92);
  --wm-color-text-muted: rgba(255, 255, 255, 0.65);
  --wm-color-border: rgba(99, 102, 241, 0.25);
  --wm-color-accent: #136df4;
  --wm-color-accent-soft: rgb(123 173 241);
  --wm-color-success: rgb(52 211 153);
  --wm-color-danger: rgb(239 68 68);
  --wm-color-focus-ring: rgba(99, 102, 241, 0.35);

  /* Artifact / modal shells (optional consumers; legacy hex still dominates) */
  --wm-artifact-backdrop: rgba(8, 12, 29, 0.38);
  --wm-artifact-border: rgb(63 81 157 / 68%);
}