/* ============================================================
   Wanted Design System — Spacing, Radius, Elevation, Layout
   ------------------------------------------------------------
   Built on a 4px grid. Radii follow the OneUI-style soft-square
   family (6→28). Shadows are low, soft and near-black — used
   sparingly; most separation comes from --line / --fill tokens.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px grid) ----------------------------- */
  --space-0: 0px;
  --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-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Common layout margins (from source spec) */
  --margin-navigation: 16px;   /* horizontal gutter for nav / app bars */
  --margin-content: 20px;      /* page content gutter (mobile) */
  --gap-normal: 16px;          /* default gap between grouped elements */

  /* ---- Radius ----------------------------------------------- */
  --radius-4: 4px;
  --radius-6: 6px;     /* xsmall controls / chips */
  --radius-8: 8px;     /* small buttons, inputs (compact) */
  --radius-10: 10px;   /* medium buttons */
  --radius-12: 12px;   /* default — buttons, inputs, small cards */
  --radius-14: 14px;   /* large buttons, fields */
  --radius-16: 16px;   /* cards */
  --radius-20: 20px;   /* large cards, sheets */
  --radius-24: 24px;   /* hero surfaces, modals */
  --radius-28: 28px;
  --radius-full: 9999px; /* pills, avatars */

  /* ---- Elevation (soft, near-black) ------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(23, 23, 23, 0.06);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(23, 23, 23, 0.06);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(23, 23, 23, 0.06);
  --shadow-4: 0 8px 28px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(23, 23, 23, 0.07);
  --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.16);

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

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

  /* ---- Z-index --------------------------------------------- */
  --z-base: 0;        /* @kind other */
  --z-sticky: 100;    /* @kind other */
  --z-nav: 200;       /* @kind other */
  --z-overlay: 800;   /* @kind other */
  --z-modal: 900;     /* @kind other */
  --z-toast: 1000;    /* @kind other */
}