/**
 * Variables CSS pour le thème Laure2019
 * Facilite la maintenance et les changements de design
 */

:root {
  /* Couleurs principales */
  --color-primary: #FFD867;
  --color-primary-dark: #570000;
  --color-text: #6a6a6a;
  --color-text-dark: #1B1B1B;
  --color-text-darker: #111;
  --color-link: #111;
  --color-link-hover: #000;
  
  /* Couleurs d'arrière-plan */
  --bg-body: #EEE;
  --bg-white: #FFF;
  --bg-highlight: #87F5FF;
  
  /* Bordures */
  --border-color: #DDD;
  --border-color-dark: #CCC;
  --border-color-darker: #999;
  --border-color-very-dark: #BBB;
  
  /* Espacements */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-xxl: 40px;
  
  /* Tailles de police */
  --font-size-base: 14px;
  --font-size-small: 0.9em;
  --font-size-large: 1.2em;
  --font-size-xlarge: 1.8em;
  --font-size-xxlarge: 2.5em;
  --font-size-huge: 4em;
  --font-size-mega: 5em;
  
  /* Polices */
  --font-family-base: "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-special: 'Fort Quinsy', cursive;
  
  /* Hauteurs et largeurs */
  --nav-height: 50px;
  --header-bar-height: 200px;
  --header-bar-height-mobile: 100px;
  --max-content-width: 1169px;
  --article-width: 272px;
  --sidebar-width: 340px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Ombres */
  --shadow-text: 1px 1px 11px #555;
  --shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.2);
  
  /* Z-index */
  --z-index-nav: 2;
  --z-index-overlay: 3;
  --z-index-modal: 4;
}

/* Mode sombre (préparation future) */
/* Décommenter et personnaliser quand le mode sombre sera implémenté
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e0e0e0;
    --bg-body: #1a1a1a;
    --bg-white: #2a2a2a;
    --border-color: #444;
  }
}
*/