/* =============================================================
   Vantage Design System — Spacing, Radii & Layout Tokens
   ============================================================= */

:root {
  /* ── Spacing Scale (4px base) ────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-xs:   4px;    /* Chips, progress bar ends */
  --radius-sm:   6px;    /* Tags, badges */
  --radius-md:   10px;   /* Odds buttons */
  --radius-lg:   12px;   /* Buttons, inputs */
  --radius-xl:   16px;   /* Default cards */
  --radius-2xl:  20px;   /* Featured/hero cards, bottom sheets (top only) */
  --radius-full: 9999px; /* Pill shapes (avatars, balance chip) */

  /* ── Component Heights ───────────────────────────────────── */
  --height-btn:       52px;   /* Primary + secondary buttons */
  --height-btn-ghost: 44px;   /* Ghost / text buttons (min tap target) */
  --height-input:     52px;   /* Text inputs, selects */
  --height-odds-btn:  52px;   /* Odds buttons */
  --height-tab-bar:   60px;   /* Bottom navigation bar */
  --height-handle:    4px;    /* Bottom sheet drag handle */

  /* ── Minimum Tap Target ──────────────────────────────────── */
  --min-tap: 44px;   /* iOS / Android minimum */

  /* ── Card / Container ────────────────────────────────────── */
  --card-padding: 16px;

  /* ── Progress Bar ────────────────────────────────────────── */
  --progress-height: 6px;
  --progress-radius: 3px;

  /* ── Safe Area Insets (iOS) ──────────────────────────────── */
  --safe-top:    44px;   /* Status bar */
  --safe-bottom: 34px;   /* Home indicator */

  /* ── Viewport ────────────────────────────────────────────── */
  --viewport-mobile-w: 390px;  /* iPhone 14/15 viewport width */
  --viewport-mobile-h: 844px;  /* iPhone 14/15 viewport height */

  /* ── Bottom Sheet ────────────────────────────────────────── */
  --sheet-handle-w: 36px;
  --sheet-handle-h: var(--height-handle);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   0.10s ease; /* @kind other */
  --transition-base:   0.15s ease; /* @kind other */
  --transition-slow:   0.30s ease; /* @kind other */
  --transition-press:  transform var(--transition-fast), background-color var(--transition-base); /* @kind other */
}