@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ===== PALETTE — Warm, dopamine-positive fintech ===== */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F8FAFC;
  --color-surface-warm: #FFFBF5;
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;

  /* Text */
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #94A3B8;

  /* Orange — primary CTA, energy, deals */
  --color-orange: #FF6B00;
  --color-orange-hover: #E85D00;
  --color-orange-light: #FFF4EC;
  --color-orange-bg: #FFF8F0;

  /* Blue — trust, brand, info */
  --color-blue: #2563EB;
  --color-blue-hover: #1D4ED8;
  --color-blue-light: #EFF6FF;
  --color-blue-bg: #F0F7FF;

  /* Green — savings, success, go */
  --color-green: #16A34A;
  --color-green-light: #F0FDF4;
  --color-green-bg: #ECFDF5;

  /* Purple — premium, bundles */
  --color-purple: #7C3AED;
  --color-purple-light: #F5F3FF;

  /* Yellow — gold accents, stars */
  --color-yellow: #F59E0B;
  --color-yellow-light: #FFFBEB;

  /* Red — urgent, limited */
  --color-red: #EF4444;

  /* Legacy mappings */
  --color-accent: #2563EB;
  --color-cta: #FF6B00;
  --color-cta-text: #FFFFFF;
  --color-success: #16A34A;

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.25rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ===== SPACING ===== */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;

  /* ===== RADII — Rounded, friendly ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 10px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-badge: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-cta: 0 4px 14px rgba(255,107,0,0.3);

  /* ===== Z-INDEX ===== */
  --z-nav: 1000;
  --z-modal: 9999;
  --z-sticky: 100;
}

/* Global body */
body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}