/*
 * Extranet2 - CSS Variables
 * Design tokens extracted from inline styles across all pages.
 * DO NOT modify values without checking visual impact on all pages.
 */
:root {
  /* Primary (red - Samaritains brand) */
  --color-primary: #dc2626;
  --color-primary-hover: #b91c1c;
  --color-primary-light: #fef2f2;
  --color-primary-border: #fecaca;

  /* Success (green) */
  --color-success: #059669;
  --color-success-hover: #047857;
  --color-success-light: #d1fae5;
  --color-success-dark: #065f46;
  --color-success-border: #86efac;

  /* Warning (amber/yellow) */
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #92400e;

  /* Danger (red) */
  --color-danger: #ef4444;
  --color-danger-light: #fee2e2;
  --color-danger-dark: #991b1b;

  /* Info (blue) */
  --color-info: #2563eb;
  --color-info-light: #dbeafe;
  --color-info-dark: #1e40af;

  /* Neutrals (stone palette) */
  --color-bg: #f5f4f2;
  --color-bg-alt: #fafaf9;
  --color-bg-hover: #f3f4f6;
  --color-white: #ffffff;
  /* Surfaces : fond des cartes/panneaux/modales. En clair = blanc ;
     bascule en sombre via le bloc body.dark-mode plus bas.
     Utiliser var(--color-surface) au lieu de `background: white` en dur. */
  --color-surface: #ffffff;
  --color-surface-alt: #f5f4f2;
  --color-text: #333;
  --color-text-dark: #1c1917;
  --color-text-heading: #1f2937;
  --color-text-body: #374151;
  --color-text-secondary: #4b5563;
  --color-text-muted: #78716c;
  --color-text-placeholder: #9ca3af;
  --color-text-light: #a8a29e;
  --color-border: #d6d3d1;
  --color-border-light: #e7e5e4;
  --color-border-input: #d1d5db;
  --color-border-section: #e5e7eb;
  --color-disabled: #d6d3d1;
  --color-stone-800: #292524;
  --color-stone-700: #44403c;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Border radius */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.3);
  --shadow-modal: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* Spacing (reference) */
  --container-padding: 24px 32px;
  --container-max-width: 1400px;
}

/* ══════════════════════════════════════════════════════════════════════
   MODE SOMBRE — source unique de la palette sombre.
   On ne redéfinit QUE les tokens neutres (fonds, surfaces, textes,
   bordures). Les couleurs de marque et sémantiques (primary, success,
   warning, danger, info) restent identiques : lisibles sur fond sombre.
   --color-white reste blanc (texte/icônes sur boutons colorés).
   Toute page qui utilise var(--token) au lieu de hex en dur hérite
   automatiquement du thème sombre — aucune règle par page nécessaire.
   ══════════════════════════════════════════════════════════════════════ */
body.dark-mode {
  --color-bg: #1c1917;
  --color-bg-alt: #1c1917;
  --color-bg-hover: #292524;
  --color-surface: #292524;
  --color-surface-alt: #1c1917;
  --color-text: #e7e5e4;
  --color-text-dark: #fafaf9;
  --color-text-heading: #fafaf9;
  --color-text-body: #e7e5e4;
  --color-text-secondary: #d6d3d1;
  --color-text-muted: #a8a29e;
  --color-text-placeholder: #78716c;
  --color-text-light: #a8a29e;
  --color-border: #44403c;
  --color-border-light: #44403c;
  --color-border-input: #44403c;
  --color-border-section: #44403c;
  --color-disabled: #44403c;
  /* Ombres plus marquées sur fond sombre */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 4px 12px rgba(0, 0, 0, 0.5);
}