/* Styles de base utilisant la palette de couleurs */
body {
  background-color: var(--azure-web);
  color: var(--dark-slate-gray);
  font-family: Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--burnt-umber);
}

a {
  color: var(--primary-orange);
  text-decoration: none;
}

a:hover {
  color: var(--primary-dark);
}

button, .button {
  background-color: var(--peach-yellow);
  color: var(--dark-purple);
  border: 2px solid var(--burnt-umber);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover, .button:hover {
  background-color: var(--burnt-umber);
  color: var(--peach-yellow);
}

.card {
  background-color: white;
  border: 1px solid var(--dark-slate-gray);
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

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

.accent-bg {
  background-color: var(--burnt-umber);
  color: white;
}

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

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

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

:root {
  /* Primary Colors */
  --primary-dark: #2D1B1B;
  --primary-brown: #8B4513;
  --primary-cream: #F5DEB3;
  --primary-orange: #FFB900;
  
  /* Secondary Colors */
  --secondary-green: #2F4F4F;
  --secondary-purple: #2D1B2D;
  
  /* Accent Colors */
  --accent-mint: #D1E5E1;
  --accent-beige: #F5F5DC;
  
  /* Functional Colors */
  --text-dark: #333333;
  --text-light: #FFFFFF;
  --background-light: #FAFAFA;
  --background-dark: #1A1A1A;
  
  /* Status Colors */
  --success: #28A745;
  --error: #DC3545;
  --warning: #FFC107;
  --info: #17A2B8;
}

.logo-text {
    color: var(--text-light) !important;
}
.logo a:hover .logo-text {
    color: var(--primary-cream) !important;
}