/* Theme Variables */
:root {
  /* Primary Colors - Modern Red Palette */
  --color-primary: #e63946;       /* Vibrant Red */
  --color-primary-light: #f5b7b1;  /* Soft Red */
  --color-primary-lightest: #fae1dd; /* Very Light Red */
  --color-primary-dark: #c1121f;   /* Deep Red */
  --color-primary-darkest: #780000; /* Dark Red */
  
  /* Secondary Colors - Red Complements */
  --color-secondary: #d00000;     /* Pure Red */
  --color-secondary-light: #ffccd5; /* Pink Red */
  --color-secondary-lightest: #fff1f1; /* Off-White Red */
  --color-secondary-dark: #9d0208;  /* Dark Red */
  --color-secondary-darkest: #6a040f; /* Very Dark Red */
  
  /* Status Colors - Red Themed */
  --color-success: #a7c957;       /* Muted Green (to complement red) */
  --color-warning: #ffb703;       /* Amber */
  --color-error: #d00000;         /* Pure Red */
  --color-info: #a4161a;          /* Dark Red */
  
  /* Neutrals - Warm Tones */
  --color-gray-50: #faf9f9;
  --color-gray-100: #f5f3f4;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d5d5d5;
  --color-gray-400: #b7b7b7;
  --color-gray-500: #a0a0a0;
  --color-gray-600: #6f6f6f;
  --color-gray-700: #4e4e4e;
  --color-gray-800: #2e2e2e;
  --color-gray-900: #1b1b1b;
  
  /* Backgrounds - Red Tinted */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #fff1f1;
  --color-bg-tertiary: #fae1dd;
  --color-bg-black: #22252e;
  
  /* Text - Warmer */
  --color-text-primary: #1b1b1b;
  --color-text-secondary: #4e4e4e;
  --color-text-muted: #6f6f6f;
  
  /* Additional Colors */
  --color-blue: #2d9ab5;
  --color-yellow: #dba500;
  --color-theme-green: #7bbd12;
  --color-bg-smoky: #f5f5f5;
  
  /* Borders - Red Tinted */
  --color-border: #e5e5e5;
  --color-border-light: #f5f3f4;
  --color-border-dark: #d5d5d5;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Transitions */
  --transition-default: all 0.2s ease-in-out;
}

/* Utility Classes */
/* Backgrounds */
.bg-primary { background-color: var(--color-primary); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-primary-lightest { background-color: var(--color-primary-lightest); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-primary-darkest { background-color: var(--color-primary-darkest); }

.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary-light { background-color: var(--color-secondary-light); }
.bg-secondary-lightest { background-color: var(--color-secondary-lightest); }
.bg-secondary-dark { background-color: var(--color-secondary-dark); }
.bg-secondary-darkest { background-color: var(--color-secondary-darkest); }
.bg-black { background-color: var(--color-bg-black); }

/* Text Colors */
.text-primary { color: var(--color-primary); }
.text-primary-light { color: var(--color-primary-light); }
.text-primary-dark { color: var(--color-primary-dark); }

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

/* Borders */
.border-primary { border-color: var(--color-primary); }
.border-primary-light { border-color: var(--color-primary-light); }
.border-primary-dark { border-color: var(--color-primary-dark); }

.border-secondary { border-color: var(--color-secondary); }
.border-secondary-light { border-color: var(--color-secondary-light); }
.border-secondary-dark { border-color: var(--color-secondary-dark); }

/* Buttons */
.btn-primary {
  background-color: var(--color-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: var(--transition-default);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: var(--transition-default);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-dark);
}

.btn-outline-primary {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: var(--transition-default);
}

.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: white;
}

/* Alerts */
.alert {
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.alert-success {
  background-color: var(--color-success-bg, #e9f5db);
  color: var(--color-success-text, #386641);
  border: 1px solid var(--color-success-border, #a7c957);
}

.alert-warning {
  background-color: var(--color-warning-bg, #fff3b0);
  color: var(--color-warning-text, #9c6644);
  border: 1px solid var(--color-warning-border, #ffb703);
}

.alert-error {
  background-color: var(--color-error-bg, #fae1dd);
  color: var(--color-error-text, #9d0208);
  border: 1px solid var(--color-error-border, #f5b7b1);
}

.alert-info {
  background-color: var(--color-info-bg, #ffdbd9);
  color: var(--color-info-text, #a4161a);
  border: 1px solid var(--color-info-border, #f5b7b1);
}