/* Variables CSS - Palette Lombard Odier */
:root {
  /* Couleurs principales inspirées du logo */
  --primary-gold: #C8A882;           /* Or/Bronze élégant du logo */
  --primary-dark: #2C2926;           /* Brun foncé sophistiqué */
  --secondary-gold: #E6D5B8;         /* Or plus clair pour les accents */
  --accent-bronze: #B8956F;          /* Bronze pour les éléments actifs */
  
  /* Couleurs neutres modernes */
  --background-main: #FAFAF9;        /* Blanc cassé très doux */
  --background-card: #FFFFFF;        /* Blanc pur pour les cartes */
  --background-subtle: #F5F4F2;      /* Beige très léger */
  
  /* Textes */
  --text-primary: #2C2926;           /* Brun foncé pour le texte principal */
  --text-dark: #2C2926;              /* Alias pour compatibilité */
  --text-secondary: #6B6B6B;         /* Gris moyen pour le texte secondaire */
  --text-muted: #6B6B6B;             /* Alias pour compatibilité */
  --text-light: #8B8B8B;             /* Gris clair pour les détails */
  --text-on-dark: #FFFFFF;           /* Blanc sur fond sombre */
  
  /* Couleurs fonctionnelles */
  --success: #4A7C4A;                /* Vert discret */
  --success-color: #4A7C4A;          /* Vert discret (alias) */
  --danger: #C85A5A;                 /* Rouge élégant */
  --danger-color: #C85A5A;           /* Rouge élégant (alias) */
  --warning-color: #D4A04A;          /* Orange doré */
  --info-color: #5A7DC8;             /* Bleu sophistiqué */
  
  /* Couleurs claires pour hover */
  --gold-light: rgba(200, 168, 130, 0.1);
  --success-light: rgba(74, 124, 74, 0.1);
  
  /* Gradients */
  --gradient-gold: linear-gradient(135deg, var(--primary-gold) 0%, var(--accent-bronze) 100%);
  --gradient-dark: linear-gradient(135deg, var(--primary-dark) 0%, #1A1917 100%);
  --gradient-subtle: linear-gradient(135deg, var(--background-card) 0%, var(--background-subtle) 100%);
  
  /* Effets et bordures */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 20px;
  
  --shadow-sm: 0 1px 3px rgba(44, 41, 38, 0.05);
  --shadow-md: 0 4px 12px rgba(44, 41, 38, 0.08);
  --shadow-lg: 0 8px 24px rgba(44, 41, 38, 0.12);
  --shadow-xl: 0 16px 40px rgba(44, 41, 38, 0.15);
  
  /* Espacements */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
}

/* Reset et base styles modernes */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--background-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typographie moderne */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--spacing-md) 0;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  letter-spacing: -0.025em;
}

h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-secondary);
}

a {
  color: var(--primary-gold);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--accent-bronze);
  text-decoration: none;
}

/* Classes utilitaires modernes */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-light { color: var(--text-light); }
.text-gold { color: var(--primary-gold); }

.bg-gold { background: var(--gradient-gold); }
.bg-dark { background: var(--gradient-dark); }
.bg-card { background-color: var(--background-card); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }