/* ══════════════════════════════════════════
   SevPay — Design Tokens
   sevpay.com.br
══════════════════════════════════════════ */
:root {
  /* Primary */
  --color-primary:       #00E5FF;
  --color-primary-light: #7CF3FF;

  /* Accent */
  --color-accent:        #8B5CF6;
  --color-accent-light:  #C4B5FD;

  /* Gradient */
  --gradient-main: linear-gradient(135deg, #00E5FF 0%, #8B5CF6 100%);

  /* Backgrounds */
  --color-bg:      #EEF2F7;
  --color-surface: #FFFFFF;

  /* Text */
  --color-text:    #0F172A;
  --color-muted:   #64748B;
  --color-border:  #E2E8F0;

  /* Status */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;

  /* Shadows */
  --shadow-card:   0px 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-glow:   0 0 20px rgba(0, 229, 255, 0.25);

  /* Radius */
  --radius-base:   16px;
  --radius-btn:    12px;
  --radius-sm:     8px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  /* Typography */
  --font-main: 'Inter', 'Sora', 'Space Grotesk', sans-serif;
}