@import "tailwindcss";
@import 'react-credit-cards-2/dist/es/styles-compiled.css';

:root {
  --background: #ffffff;
  --foreground: #171717;
  
  /* Cores primárias personalizadas */
  --primary: #3B66AF;
  --primary-dark: #2A4A8F;
  --primary-light: #5a7bc7;
  --secondary: #FCD34D;
  --secondary-dark: #ca8a04;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-dark: var(--primary-dark);
  --color-primary-light: var(--primary-light);
  --color-secondary: var(--secondary);
  --color-secondary-dark: var(--secondary-dark);
  --font-sans: var(--font-poppins);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-poppins), system-ui, sans-serif;
}

button {
  font-family: var(--font-poppins), system-ui, sans-serif;
}

/* Classes utilitárias para cores primárias */
.bg-primary {
  background-color: var(--primary);
}

.text-primary {
  color: var(--primary);
}

.border-primary {
  border-color: var(--primary);
}

.hover\:bg-primary:hover {
  background-color: var(--primary);
}

.hover\:text-primary:hover {
  color: var(--primary);
}

/* Gradientes personalizados */
.gradient-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.gradient-primary-light {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
}