@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Colores base */
  --primary-color:   #1976D2;
  --secondary-color: #424242;
  --warning-color:   #dc3545;   /* rojo para acciones peligrosas */
  --background-color:#FFFFFF;

  /* Tipografía */
  --font-family: 'Roboto', sans-serif;
  --font-size: 16px;

  /* Texto y bordes */
  --text-color:       #333333;
  --muted-text-color: #555555;
  --border-color:     #e0e0e0;

  /* Sombras */
  --card-shadow:       0 2px 5px rgba(0,0,0,0.05);
  --card-hover-shadow: 0 4px 10px rgba(0,0,0,0.10);

  /* Colores de módulo */
  --accent-color-asistencias: #4CAF50;
  --accent-color-empleados:   #2196F3;
  --accent-color-planillas:   #FF9800;
  --accent-color-tareas:      #9C27B0;

  /* Fondos de tabla (light) */
  --table-container-bg-color-asistencias: #fdebee;
  --table-container-bg-color-empleados:   #e3f2fd;
  --table-container-bg-color-planillas:   #fff8e1;
  --table-container-bg-color-tareas:      #e6f4ea;
}


html.theme-dark {
  --primary-color: #2196F3; /* Example dark theme primary */
  --secondary-color: #757575; /* Example dark theme secondary */
  --warning-color: #FFA000; /* Example dark theme warning */
  --background-color: #303030; /* Dark theme background */
  --text-color: #FFFFFF; /* Text color for dark theme */

  /* NEW: Module-specific table container background colors (Dark Theme) */
  --table-container-bg-color-asistencias: #4a1f28;
  --table-container-bg-color-empleados: #193a50;
  --table-container-bg-color-planillas: #503f1b;
  --table-container-bg-color-tareas: #1e4028;
}

/* Apply background and text color to the body for theme changes */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: var(--font-size);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.animations-disabled * {
  transition: none !important;
  animation: none !important;
}

/* Example of using a CSS variable */
.some-component {
  background-color: var(--primary-color);
  font-family: var(--font-family);
}