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

:root {
  --primary-color: #1976D2;
  --secondary-color: #424242;
  --warning-color: #FFC107;
  --background-color: #FFFFFF;
  --font-family: 'Roboto', sans-serif;
  --font-size: 16px;
  /* Add other variables as needed, e.g., text colors for themes */
  --text-color: #212121; /* Default text color for light theme */
}

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 */
}

/* 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);
}