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

@layer base {
  :root {
    /* Light theme colors */
    --primary-light: #1d4ed8; /* Blue */
    --secondary-light: #10b981; /* Green */
    --thitiary-light: #6b7280; /* Gray */
    --confirm-light: #3b82f6; /* Light Blue */
    --alert-light: #f59e0b; /* Amber */
    --warning-light: #fbbf24; /* Yellow */
    --error-light: #ef4444; /* Red */
    --destructive-light: #dc2626; /* Dark Red */
    --background-light: #f3f4f6; /* Light Gray */
    --heading-light: #111827;

    /* Dark theme colors */
    --primary-dark: #60a5fa; /* Light Blue */
    --secondary-dark: #34d399; /* Light Green */
    --thitiary-dark: #9ca3af; /* Light Gray */
    --confirm-dark: #93c5fd; /* Pale Blue */
    --alert-dark: #fbbf24; /* Yellow */
    --warning-dark: #fde047; /* Light Yellow */
    --error-dark: #f87171; /* Light Red */
    --destructive-dark: #f87171; /* Light Red */
    --background-dark: #111827; /* Very Dark Gray */
    --heading-dark: #f3f4f6;

    /* Default to light theme values */
    --primary: var(--primary-light);
    --secondary: var(--secondary-light);
    --thitiary: var(--thitiary-light);
    --confirm: var(--confirm-light);
    --alert: var(--alert-light);
    --warning: var(--warning-light);
    --error: var(--error-light);
    --destructive: var(--destructive-light);
    --background: var(--background-light);
    --heading: var(--heading-light);
  }

  /* Dark theme overrides */
  .dark {
    --primary: var(--primary-dark);
    --secondary: var(--secondary-dark);
    --thitiary: var(--thitiary-dark);
    --confirm: var(--confirm-dark);
    --alert: var(--alert-dark);
    --warning: var(--warning-dark);
    --error: var(--error-dark);
    --destructive: var(--destructive-dark);
    --background: var(--background-dark);
    --heading: var(--heading-dark);
  }
}
