/* ============================================================
   Wanted Design System — Spacing, Radius & Elevation
   Base unit is 4px. Spacing names are the literal pixel value.
   ============================================================ */

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

  /* ---- Corner radius ---- */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;   /* default control radius (buttons, fields)   */
  --radius-14: 14px;
  --radius-16: 16px;   /* cards                                      */
  --radius-20: 20px;   /* large cards / sheets                       */
  --radius-24: 24px;
  --radius-28: 28px;
  --radius-32: 32px;   /* hero panels / modals                       */
  --radius-full: 9999px; /* pills, chips, avatars                     */

  /* default alias used by most controls */
  --radius: var(--radius-12);

  /* ---- Layout widths ---- */
  --width-content-min: 320px;
  --width-content-normal: 400px;
  --width-content-max: 1060px;
  --width-viewport-lg: 1100px;
  --width-viewport-xl: 1440px;

  /* ---- Elevation (soft, cool, low-contrast shadows) ---- */
  --shadow-normal: 0 1px 4px rgba(23, 23, 23, 0.07), 0 0 1px rgba(23, 23, 23, 0.1);
  --shadow-emphasize: 0 2px 8px rgba(23, 23, 23, 0.1), 0 0 1px rgba(23, 23, 23, 0.1);
  --shadow-strong: 0 6px 16px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-heavy: 0 12px 32px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.08);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
}