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

/* Configuración de fondo base */
body {
  @apply bg-paper text-ink transition-colors duration-200;
}

/* Modo Oscuro Estricto */
html.dark body {
  background-color: #0d0d0d !important;
  color: #f0f0f0 !important;
}

/* Ajustes de bordes y tarjetas en modo oscuro */
html.dark .border-ink-border {
  border-color: #262626 !important;
}

html.dark header {
  background-color: rgba(13, 13, 13, 0.95) !important;
  border-color: #262626 !important;
}

/* Solo alterar textos dentro de main y header para no arruinar el footer negro */
html.dark main p, 
html.dark main time, 
html.dark main span:not(.no-dark) {
  color: #a3a3a3;
}

html.dark main h1, 
html.dark main h2, 
html.dark main h3 {
  color: #f3f4f6 !important;
}

/* Estilos de inputs/widgets */
html.dark input[type="text"], 
html.dark input[type="range"] {
  background-color: #171717;
  border-color: #404040;
  color: #ffffff;
}