/* ============================================================
   ESMÉE — Spacing & radius tokens
   Source: lib/core/constants/app_spacing.dart + bc_design.dart
   ============================================================ */

:root {
  /* ── Spacing scale (px) ────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-3-5: 14px;   /* bc s14 — activity-tile gap */
  --space-4: 16px;
  --space-4-5: 18px;   /* bc s18 — card padding */
  --space-5: 20px;     /* screen gutter */
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Semantic aliases (app AppSpacing naming) */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-xxl: var(--space-12);

  /* Standard screen gutter (dashboard uses 20px horizontal) */
  --gutter: 20px;

  /* ── Border radii (px) ─────────────────────────────────── */
  --radius-sm: 8px;         /* inputs, small chips (bc radiusInput) */
  --radius-card: 10px;      /* default surface (bc radiusSm) */
  --radius-md: 12px;        /* buttons, icon pills */
  --radius-lg: 16px;        /* larger cards / stat tiles */
  --radius-card-lg: 20px;   /* hero cards, activity tiles (bc radiusLg) */
  --radius-xl: 24px;        /* bottom sheets */
  --radius-diagonal: 100px; /* decorative diagonal (auth headers) */
  --radius-full: 999px;     /* pills, avatars, FAB */

  /* ── Standard component sizes ──────────────────────────── */
  --button-height: 50px;        /* full-width button */
  --field-height: 60px;         /* auth / input field */
  --activity-tile-height: 80px; /* list activity tile */
  --status-dot: 12px;
  --nav-height: 70px;           /* bottom nav bar */
  --fab-size: 58px;             /* centre FAB */
}