/* Define Tailwind color palette as CSS variables (Light Theme) */
:root {
  /* Base colors (Light mode) */
  --color-background-primary: #FFFFFF; /* Main background */
  --color-background-secondary: #FFFFFF; /* Secondary background */
  --color-text-primary: #1A1A1A; /* Main text color (black) */
  --color-text-secondary: #606060; /* Secondary text color (gray) */
  --color-text-muted: #A8A8A8; /* Muted text */

  /* Accent colors (Blue theme) */
  --color-accent-primary: #1D4ED8; /* Primary blue */
  --color-accent-hover: #0066CC; /* Darker blue on hover */
  --color-accent-highlight: #265886; /* Soft blue highlight */
  --color-accent-muted: #94BFFF; /* Muted blue */

  /* Neutral Gray Shades */
  --color-gray-light: #E5E5E5; /* Light gray for dividers */
  --color-gray-default: #D1D1D1; /* Default gray */

  /* Danger Colors (Red Theme) */
  --color-danger-primary: #D32F2F; /* Red (danger) */
  --color-danger-hover: #B71C1C; /* Darker red */

  /* Success Colors (Green Theme) */
  --color-success-primary: #2E7D32; /* Green (success) */
  --color-success-background: #C8E6C9; /* Soft green */
  --color-success-hover: #1B5E20; /* Darker green */
}

/* Use CSS variables in utility classes */
.bg-background-primary {
  background-color: var(--color-background-primary);
}

.bg-background-secondary {
  background-color: var(--color-background-secondary);
}

.bg-accent-primary {
  background-color: var(--color-accent-primary);
}

.bg-accent-hover:hover {
  background-color: var(--color-accent-hover);
}

.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-accent {
  color: var(--color-accent-primary);
}

.text-danger {
  color: var(--color-danger-primary);
}

.text-success {
  color: var(--color-success-primary);
}