@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: var(--font-body), sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline), sans-serif;
}

@layer base {
  :root {
    --background: 214 16% 95%; /* Gris claro #F2F4F7 */
    --foreground: 211 33% 28%; /* Azul profundo #30475E */
    --card: 0 0% 100%;
    --card-foreground: 211 33% 28%;
    --popover: 0 0% 100%;
    --popover-foreground: 211 33% 28%;
    --primary: 211 33% 28%; /* Azul profundo #30475E */
    --primary-foreground: 210 40% 98%;
    --secondary: 214 25% 93%;
    --secondary-foreground: 211 33% 28%;
    --muted: 214 25% 93%;
    --muted-foreground: 215 20% 55%;
    --accent: 0 84% 64%; /* Naranja #F05454 */
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 64%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 25% 90%;
    --input: 214 25% 93%;
    --ring: 211 33% 28%;
    --chart-1: 211 33% 28%;
    --chart-2: 0 84% 64%;
    --chart-3: 11 31% 61%;
    --chart-4: 18 33% 72%;
    --chart-5: 2 33% 41%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 211 33% 15%;
    --foreground: 214 16% 95%;
    --card: 211 33% 20%;
    --card-foreground: 214 16% 95%;
    --popover: 211 33% 15%;
    --popover-foreground: 214 16% 95%;
    --primary: 214 16% 90%;
    --primary-foreground: 211 33% 15%;
    --secondary: 211 33% 25%;
    --secondary-foreground: 214 16% 95%;
    --muted: 211 33% 25%;
    --muted-foreground: 215 20% 65%;
    --accent: 0 84% 64%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 64%;
    --destructive-foreground: 0 0% 100%;
    --border: 211 33% 25%;
    --input: 211 33% 25%;
    --ring: 214 16% 90%;
    --chart-1: 214 16% 90%;
    --chart-2: 0 84% 64%;
    --chart-3: 11 31% 61%;
    --chart-4: 18 33% 72%;
    --chart-5: 20 25% 97%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}