/* ═══════════════════════════════════════════════
   VARIABLES CSS — Design tokens centralisés
   ═══════════════════════════════════════════════ */

:root {
  /* Couleurs principales */
  --color-primary:      #1a1a2e;
  --color-accent:       #0b665f;
  --color-accent-light: #81c8be;
  --color-accent-dark:  #083c30;
  --color-highlight:    #328775;

  /* Couleurs de fond */
  --color-bg:           #f4f4f4;
  --color-bg-card:      rgba(255, 255, 255, 0.97);
  --color-bg-header:    #ffffff;
  --color-bg-input:     #fafafa;

  /* Couleurs de texte */
  --color-text:         #333;
  --color-text-dark:    #1a1a2e;
  --color-text-muted:   #888;
  --color-text-light:   #555;
  --color-text-label:   #666;
  --color-text-dim:     #777;
  --color-text-faint:   #999;
  --color-text-tag:     #bbb;
  --color-text-heading: #444;

  /* Bordures */
  --color-border:       #e0e0e0;
  --color-border-light: #eee;
  --color-border-input: #ccc;
  --color-border-sep:   #ddd;

  /* Couleurs d'interaction */
  --color-focus:        #4a90d9;
  --color-danger:       #c0392b;

  /* Couleurs des couches géo */
  --color-geo-outline:  #6b6e6c;
  --color-metro-fill:   #929695;

  /* Ombres */
  --shadow-header:      0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-card:        0 4px 14px rgba(0, 0, 0, 0.14);
  --shadow-card-lg:     0 4px 18px rgba(0, 0, 0, 0.18);
  --shadow-modal:       0 8px 40px rgba(0, 0, 0, 0.45);
  --shadow-img:         0 2px 12px rgba(0, 0, 0, 0.12);
  --shadow-circle:      0 1px 2px rgba(0, 0, 0, 0.10);

  /* Rayons */
  --radius-sm:          5px;
  --radius-md:          6px;
  --radius-lg:          8px;
  --radius-xl:          10px;
  --radius-2xl:         12px;

  /* Transitions */
  --transition-fast:    0.15s ease;
  --transition-std:     0.25s ease;
  --transition-border:  border-color 0.2s;

  /* Overlay modal */
  --color-modal-bg:     rgba(10, 10, 20, 0.82);
}