/* ─────────────────────────────────────────────────────────────────
   KOWL · Spacing, radii & sizing tokens
   The app is built on a 1400px fixed canvas with a 50px gutter and
   generous vertical rhythm. Pills are fully rounded (h 50px); cards
   use a 20px radius. Values below mirror the literal Tailwind usages.
   ───────────────────────────────────────────────────────────────── */
:root {
  /* ── Spacing scale (4px base) ───────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 50px;   /* the signature page gutter */
  --space-14: 56px;
  --space-16: 64px;

  /* ── Layout ─────────────────────────────────────────────────── */
  --layout-canvas: 1400px;   /* fixed app width             */
  --layout-gutter: 50px;     /* left/right page padding     */
  --layout-nav-h: 80px;      /* tab bar height              */

  /* ── Radii ──────────────────────────────────────────────────── */
  --radius-xs: 5px;     /* selected criteria row             */
  --radius-sm: 8px;
  --radius-md: 12px;    /* nav pill (rounded-xl)             */
  --radius-lg: 20px;    /* cards                            */
  --radius-xl: 24px;    /* dropdown menus (rounded-3xl)     */
  --radius-pill: 9999px;/* buttons, pills, toggles, avatars */

  /* ── Control sizes ──────────────────────────────────────────── */
  --pill-h: 50px;       /* input / select pills, action btns */
  --toggle-w: 32px;
  --toggle-h: 18px;
  --gauge-track-h: 2px; /* scoring gauge                     */
  --bar-track-h: 10px;  /* lifecycle phase bar               */

  /* ── Ring sizes (score rings) ───────────────────────────────── */
  --ring-xl: 200px;
  --ring-md: 100px;
  --ring-sm: 75px;
  --ring-partner: 80px;
}