@import "tailwindcss";
@plugin "@tailwindcss/typography";

:root {
  --background: #FAFAF8;
  --foreground: #1C1917;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --border: #E7E5E4;
  --border-subtle: #F5F5F4;
  --text-primary: #1C1917;
  --text-secondary: #57534E;
  --text-tertiary: #A8A29E;
  --accent: #4338CA;
  --accent-hover: #3730A3;
  --accent-subtle: #EEF2FF;
  --accent-text: #4338CA;
  --success: #15803D;
  --success-subtle: #F0FDF4;
  --danger: #DC2626;
  --danger-subtle: #FEF2F2;
  --warm: #D97706;
  --warm-subtle: #FFFBEB;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-subtle: var(--accent-subtle);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans), system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar sutil */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #D6D3D1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #A8A29E;
}

/* Focus ring consistente */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Animaciones */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

.animate-scale-in {
  animation: scale-in 0.2s ease-out;
}
