/* ==========================================================================
   tokens.css — FanCash design tokens (Figma-verified)
   ========================================================================== */
:root {
  /* Brand */
  --color-bg-deep: #0a0628;
  --color-bg-primary: #1a0e57;
  --color-bg-glow: #4a1f8a;
  --color-purple-accent: #5b3fd9;
  --color-brand-purple: #5327DC;
  --color-text-primary: #fff;
  --color-text-secondary: rgba(255,255,255,0.75);
  --color-text-subtle: #8a85b5;
  --border-positive: #51ce60;
  --color-accent-green: #1ed760;
  --color-tab-divider: rgba(255,255,255,0.12);
  --card-grad-top: #5128D7;
  --card-grad-bottom: #0E1A53;
  --card-border: #979797;

  /* Category colors — single source of truth for spend tab */
  --cat-trading-from: #0ABF4C;
  --cat-trading-to: #1ED760;
  --cat-fanshop-from: #FE0090;
  --cat-fanshop-to: #FA5457;
  --cat-boosts-from: #1ED760;
  --cat-boosts-to: #0ABF4C;
  --cat-collect-from: #FF9500;
  --cat-collect-to: #FFB800;
  --cat-events-from: #00D4FF;
  --cat-events-to: #0090FF;
  --cat-bets-from: #A13FC0;
  --cat-bets-to: #7B2FE0;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Easings */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-pill: 999px;

  /* Card tokens — mobile first (small screens) */
  --card-width: 100%;
  --card-padding: 12px;
  --card-gap: 14px;
  --card-radius: 28px;
  --card-img-size: 120px;
  --card-title-fs: 17px;
  --card-title-lh: 22px;
  --card-price-fs: 28px;
  --card-price-lh: 32px;
  --card-badge-fs: 12px;
  --card-badge-lh: 16px;
  --card-badge-px: 8px;
  --card-badge-py: 2px;
  --card-badge-radius: 6px;
  --card-badge-border: 1px;
  --card-border-bottom: 1px;
  --card-snack-fs: 11px;
  --card-snack-bottom: 10px;
  --card-snack-pad: 6px 12px;
  --card-snack-gap: 6px;
  --card-snack-icon: 16px;
  --card-snack-radius: 20px;
}

/* Larger phones (390px+) — original Figma mobile sizes */
@media (min-width: 24.375rem) {
  :root {
    --card-width: 100%;
    --card-padding: 14px;
    --card-gap: 16px;
    --card-radius: 32px;
    --card-img-size: 140px;
    --card-title-fs: 19px;
    --card-title-lh: 24px;
    --card-price-fs: 30px;
    --card-price-lh: 34px;
    --card-badge-fs: 13px;
    --card-badge-lh: 18px;
    --card-badge-px: 9px;
    --card-badge-py: 2px;
    --card-badge-radius: 7px;
    --card-badge-border: 1.2px;
    --card-border-bottom: 1.2px;
    --card-snack-fs: 12px;
    --card-snack-bottom: 12px;
    --card-snack-pad: 7px 14px;
    --card-snack-gap: 7px;
    --card-snack-icon: 18px;
    --card-snack-radius: 22px;
  }
}

/* Tablet */
@media (min-width: 48rem) {
  :root {
    --card-width: 520px; --card-padding: 20px; --card-gap: 30px; --card-radius: 40px;
    --card-img-size: 220px; --card-title-fs: 28px; --card-title-lh: 36px;
    --card-price-fs: 48px; --card-price-lh: 52px; --card-badge-fs: 16px; --card-badge-lh: 22px;
    --card-badge-px: 12px; --card-badge-py: 4px; --card-badge-radius: 9px;
    --card-badge-border: 1.5px; --card-border-bottom: 1.5px; --card-snack-fs: 15px;
    --card-snack-bottom: 18px; --card-snack-pad: 10px 22px; --card-snack-gap: 10px;
    --card-snack-icon: 22px; --card-snack-radius: 28px;
  }
}

/* Desktop — card in 2-col layout */
@media (min-width: 64rem) {
  :root {
    --card-width: 100%; --card-padding: 20px; --card-gap: 28px; --card-radius: 40px;
    --card-img-size: 200px; --card-title-fs: 24px; --card-title-lh: 32px;
    --card-price-fs: 44px; --card-price-lh: 44px; --card-badge-fs: 15px; --card-badge-lh: 20px;
    --card-badge-px: 11px; --card-badge-py: 3px; --card-badge-radius: 8px;
    --card-badge-border: 1.5px; --card-border-bottom: 1.5px; --card-snack-fs: 14px;
    --card-snack-bottom: 16px; --card-snack-pad: 9px 20px; --card-snack-gap: 9px;
    --card-snack-icon: 20px; --card-snack-radius: 26px;
  }
}