@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {
  --background: 72 33% 97%;
  --foreground: 227 37% 24%;
  --card: 72 33% 97%;
  --card-foreground: 227 37% 24%;
  --popover: 0 0% 100%;
  --popover-foreground: 227 37% 24%;
  --primary: 227 37% 24%;
  --primary-foreground: 72 33% 97%;
  --secondary: 227 15% 90%;
  --secondary-foreground: 227 37% 24%;
  --muted: 72 15% 93%;
  --muted-foreground: 227 10% 50%;
  --accent: 227 20% 85%;
  --accent-foreground: 227 37% 24%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 227 15% 88%;
  --input: 227 15% 88%;
  --ring: 227 37% 24%;
  --radius: 0.25rem;
  --gold: 40 60% 50%;
  --gold-foreground: 0 0% 100%;
}

.dark {
  --background: 227 37% 10%;
  --foreground: 72 33% 97%;
  --card: 227 37% 14%;
  --card-foreground: 72 33% 97%;
  --popover: 227 37% 14%;
  --popover-foreground: 72 33% 97%;
  --primary: 72 33% 97%;
  --primary-foreground: 227 37% 24%;
  --secondary: 227 20% 20%;
  --secondary-foreground: 72 33% 97%;
  --muted: 227 20% 20%;
  --muted-foreground: 227 10% 60%;
  --accent: 227 20% 25%;
  --accent-foreground: 72 33% 97%;
  --border: 227 20% 20%;
  --input: 227 20% 20%;
  --ring: 72 33% 97%;
  --gold: 40 60% 50%;
  --gold-foreground: 0 0% 100%;
}

* {
  border-color: hsl(var(--border));
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Josefin Sans", sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utilidad para toast notifications (si implementamos uno custom) */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 12px 24px;
  border-radius: var(--radius);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  animation: fade-in-up 0.5s ease-out forwards;
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}