/* =========================================================
   VARIABLES — thème et tokens de design
   ========================================================= */
:root {
  /* Backgrounds */
  --bg:          #0b0d10;
  --panel:       #12151a;
  --panel-2:     #171b21;

  /* Borders */
  --border:      #222933;
  --border-soft: #1a1f26;

  /* Texte */
  --text:  #e6e8eb;
  --muted: #8a95a3;
  --dim:   #596271;

  /* Accents */
  --accent:       #f5c518;   /* jaune CS */
  --accent-hover: #ffd633;

  /* Statuts */
  --green:  #3ddc84;
  --yellow: #f0b429;
  --orange: #ff8a3d;
  --red:    #ff4d4d;

  /* Couleurs complémentaires */
  --purple: #b26bff;
  --blue:   #5aa9ff;

  /* Typographie */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Rayons / espacements */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Transitions */
  --t-fast: .15s ease;
  --t-med:  .25s ease;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: .3px;
}

body {
  min-height: 100vh;
  padding-bottom: 60px;
}

/* Couleurs utilitaires */
.text-green  { color: var(--green); }
.text-yellow { color: var(--yellow); }
.text-red    { color: var(--red); }