/* ════════════════════════════════════════════════════════════════════
   Design tokens — single source of truth for radius & spacing.
   Symmetric scales so buttons, cards, inputs, panels etc. share the
   same corner rounding and the same rhythm across the whole app.

   Loaded globally in _Layout and in the standalone (Layout=null) auth
   pages. Every element still carries a literal fallback in var(...),
   so the correct symmetric value applies even where this file isn't
   loaded — this file lets you re-tune the whole system from one place.
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Radius scale (symmetric, role-based) ── */
    --radius-xs: 4px;      /* chips, tiny toggles, progress bars      */
    --radius-sm: 8px;      /* buttons, inputs, small controls         */
    --radius-md: 12px;     /* cards, panels                           */
    --radius-lg: 16px;     /* large / feature cards, modals           */
    --radius-pill: 999px;  /* pills, tags, fully-rounded buttons      */
    --radius-circle: 50%;  /* avatars, dots, circular elements        */

    /* ── Spacing scale (4px grid) ── */
    --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-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
}