/* ===================================================================
 * Charte PAGI PRO — Variables couleurs et tokens
 * Modifie les valeurs ci-dessous pour adapter la charte sans toucher au code.
 * ================================================================ */

:root {
  /* Couleurs principales */
  --pagi-green: #6FA82C;
  --pagi-green-dark: #5b8a23;
  --pagi-green-light: #8fc450;
  --pagi-anthracite: #0F1B2D;
  --pagi-anthracite-light: #1c2c47;
  --pagi-orange: #d97706;

  /* Neutres */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-500: #6B7280;
  --gray-700: #374151;
  --gray-900: #111827;

  /* États */
  --red-600:   #DC2626;
  --green-500: #10B981;
  --yellow-500:#F59E0B;
  --blue-500:  #3B82F6;

  /* Sémantique app */
  --bg-app: var(--gray-50);
  --bg-card: #ffffff;
  --text-primary: var(--pagi-anthracite);
  --text-secondary: var(--gray-500);
  --border: var(--gray-200);

  /* Typographie */
  --font-sans: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Manrope', 'Inter', sans-serif;

  /* Rayons et ombres */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15,27,45,.06);
  --shadow:    0 4px 12px rgba(15,27,45,.08);
  --shadow-lg: 0 10px 30px rgba(15,27,45,.15);

  /* Dimensions layout */
  --sidebar-w: 240px;
  --header-h: 64px;
  --bottom-nav-h: 64px;
}

/* === Dark mode === */
html.dark {
  --bg-app: #0a1322;
  --bg-card: #142239;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border: #1f2e4a;
  --gray-50:  #142239;
  --gray-100: #1c2c47;
  --gray-200: #1f2e4a;
}

/* === Tailwind helpers de couleur (alias) === */
.text-pagi { color: var(--pagi-green); }
.bg-pagi { background-color: var(--pagi-green); }
.text-anthracite { color: var(--pagi-anthracite); }
.bg-anthracite { background-color: var(--pagi-anthracite); }