/**
 * Variables CSS pour le thème etudesecours
 */

:root {
  /* Couleurs principales */
  --color-white: #FFFFFF;
  --color-beige: #EDECE8;
  --color-footer: #EDEDED;
  --color-light-green: #8aba88;
  --color-green: #6E956E;
  --color-purple: #7743FB;
  --color-purple-light: #A580FF;
  --color-yellow: #F7C142;
  --color-teal-dark: #005F63;
  --color-teal-light: #009DA2;
  --color-red: #FF4733;
  --color-turquoise: #42C2BD;
  --color-black: #090909;
  
  /* Couleurs de base */
  --color-light-black: #1d1d1d;
  --color-dark-grey: #303030;
  --color-grey: #666666;
  --color-light-grey: #eeeeee;
  --color-light-grey-rgba: rgba(238, 238, 238, 0.5);
  
  /* Couleurs de fond */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f5;
  
  /* Couleurs de texte */
  --color-text-primary: #ffffff;
  --color-text-secondary: #090909;
  
  /* Espacements */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2.3rem;
  --space-xl: 4rem;
  --space-xxl: 8rem;
  
  /* Typographie */
  --font-primary: 'Aeonik', sans-serif;
  --font-secondary: 'Arial', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2rem;
  
  /* Bordures */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 15px;
  --border-radius-l:  20px;
  --border-radius-xl: 50px;
  
  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Animations */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* conteneurs */
  --centered-container-width: 1200px;
  --course-list-container-width: 1200px;

  color-scheme: dark;
}

/* Déclaration des polices de caractères */
@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/aeonik-regular.woff2') format('woff2'),
       url('../fonts/aeonik-regular.woff') format('woff'),
       url('../fonts/aeonik-regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/aeonik-semibold.woff2') format('woff2'),
       url('../fonts/aeonik-semibold.woff') format('woff'),
       url('../fonts/aeonik-semibold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}