/**
 * Variables CSS centrales — ClinLead Design System
 * =============================================================================
 * SOURCE UNIQUE du thème : chaque page et chaque composant lit ces jetons.
 * Ne jamais redéfinir une couleur en dur dans une page — ajouter ou ajuster
 * un jeton ici pour que l'ensemble de l'application reste cohérent.
 *
 * Direction visuelle : premium, mature, clinique et chaleureuse.
 *   - bleu nuit profond pour la navigation ;
 *   - fond ivoire, cartes blanches (la couleur sert la hiérarchie et les
 *     statuts, jamais la décoration) ;
 *   - turquoise désaturé pour les actions positives ;
 *   - bordeaux doux / rose poudré réservés à l'urgence ;
 *   - terracotta pour les alertes secondaires.
 * Les contrastes texte/fond visent AA (voir tests/theme-tokens.test.mjs).
 */
:root {
  /* --- Couleurs de marque (bleu nuit) --- */
  --cl-primary-900: #0b1d30;
  --cl-primary-800: #102a43;
  --cl-primary-700: #16395a;
  --cl-primary-600: #1d4b73;
  --cl-primary-500: #24608f;
  --cl-primary-400: #3d80b5;
  --cl-primary-100: #e4edf5;
  --cl-primary-050: #f2f7fa;

  /* Turquoise désaturé — actions positives, jamais un turquoise vif. */
  --cl-accent-600: #33756f;
  --cl-accent-500: #3f8f8b;
  --cl-accent-100: #e3f0ee;

  /* --- Neutres (gris bleutés, fond ivoire) --- */
  --cl-gray-900: #1a1d23;
  --cl-gray-800: #23272f;
  --cl-gray-700: #3a4048;
  --cl-gray-600: #545b66;
  --cl-gray-500: #6f7681;
  --cl-gray-400: #98a0ab;
  --cl-gray-300: #c6c9cd;
  --cl-gray-200: #e5e2de;
  --cl-gray-100: #edeae6;
  --cl-gray-050: #f7f5f2;
  --cl-white: #ffffff;

  /* Surfaces : l'ivoire porte le fond, le blanc porte les cartes. */
  --cl-surface-page: #f7f5f2;
  --cl-surface-card: #ffffff;
  --cl-surface-muted: #f2f0ec;

  /* --- Sémantique --- */
  --cl-success-600: #33756f;
  --cl-success-100: #e3f0ee;
  /* Terracotta douce — alertes secondaires. Assombrie par rapport à la
     teinte indicative pour atteindre un contraste AA (4.8:1) sur son fond
     de badge — voir tests/whatsapp-and-theme.test.mjs. */
  --cl-warning-600: #95563a;
  --cl-warning-100: #f7e9e1;
  /* Bordeaux doux — urgence, jamais un rouge criard. */
  --cl-danger-600: #a8475c;
  --cl-danger-700: #8d3549;
  --cl-danger-050: #fdf5f7;
  --cl-danger-100: #f6e6ea;
  --cl-critical-600: #7d2438;
  --cl-critical-100: #f2dde2;
  --cl-info-600: #1d4b73;
  --cl-info-100: #e4edf5;

  /* --- Badges SLA --- */
  --sla-nouveau-bg: var(--cl-info-100);
  --sla-nouveau-fg: var(--cl-info-600);
  --sla-surveiller-bg: var(--cl-warning-100);
  --sla-surveiller-fg: var(--cl-warning-600);
  --sla-retard-bg: #f7e2d6;
  --sla-retard-fg: #8f4a2c;
  --sla-critique-bg: var(--cl-critical-100);
  --sla-critique-fg: var(--cl-critical-600);
  --sla-traite-bg: var(--cl-success-100);
  --sla-traite-fg: var(--cl-success-600);

  /* --- Avis Google : échelle de notes ---
     Une note est un signal objectif : l'échelle va du vert (5 étoiles) au
     corail déjà utilisé pour l'urgence (1 étoile), sans jamais recourir au
     rouge vif. L'or des étoiles est distinct du reste de la charte : c'est
     la convention universelle de la notation, la remplacer nuirait à la
     lecture immédiate. */
  --avis-etoile: #e0a02f;
  --avis-etoile-claire: #f3b03c;
  --avis-note-5: #2f8f6b;
  --avis-note-4: #7aa84f;
  --avis-note-3: #d9a441;
  --avis-note-2: #cf7a3f;
  --avis-alerte-fond: #fdf3f2;
  --cl-primary-750: #143a5c;

  /* --- Accents du Centre d'action (palette de référence) --- */
  --cl-corail: #df6e78;
  --cl-corail-050: #fdf1f2;
  --cl-corail-600: #b64d57;
  --cl-rose: #d88798;
  --cl-ambre: #d4973d;
  --cl-ambre-050: #fbf4e8;
  --cl-ambre-600: #8f6218;
  --cl-turquoise: #2fa58f;
  --cl-turquoise-050: #e7f6f2;
  --cl-turquoise-600: #1f7a68;
  --cl-bleu-doux: #5e82c2;
  --cl-bleu-doux-050: #eef2fa;
  --cl-bleu-doux-600: #3a5a95;
  --cl-lavande: #8778b5;

  /* --- Familles d'étiquettes ---
     Une couleur COHÉRENTE PAR FAMILLE (statut, langue, catégorie métier),
     douce mais visible : fond légèrement teinté + texte foncé + bordure
     subtile. La couleur ne porte JAMAIS l'information seule — le libellé
     texte reste systématiquement présent dans le badge. */

  /* Statuts de traitement */
  --tag-a-traiter-bg: #fbe0e4;   --tag-a-traiter-fg: #9c3350;
  --tag-en-cours-bg: #ddeaf7;    --tag-en-cours-fg: #2f5f8f;
  --tag-traite-bg: #d9ece3;      --tag-traite-fg: #3f6f5f;
  --tag-sans-action-bg: #e6e9ee; --tag-sans-action-fg: #5a6472;

  /* Langues — famille lavande/bleu doux, distincte des statuts */
  --tag-langue-fr-bg: #e6e2f5;   --tag-langue-fr-fg: #5b5292;
  --tag-langue-ar-bg: #dcebf3;   --tag-langue-ar-fg: #37627d;
  --tag-langue-en-bg: #e0ecdf;   --tag-langue-en-fg: #4a6b48;
  --tag-langue-autre-bg: #f0eef0; --tag-langue-autre-fg: #5f5566;

  /* Catégories métier — différenciées mais désaturées */
  --tag-rdv-bg: #d8ece7;         --tag-rdv-fg: #2f6b64;
  --tag-prix-bg: #f4e7cf;        --tag-prix-fg: #85601f;
  --tag-medical-bg: #f7dfe4;     --tag-medical-fg: #8d3549;
  --tag-relance-bg: #f3e2d6;     --tag-relance-fg: #8a5136;
  --tag-suivi-bg: #dde6f5;       --tag-suivi-fg: #3c5a8a;
  --tag-localisation-bg: #dbeaef; --tag-localisation-fg: #3b6274;
  --tag-horaires-bg: #e8e2f3;    --tag-horaires-fg: #5c4f86;
  --tag-verification-bg: #ebe7da; --tag-verification-fg: #6b6146;

  /* --- Typographie --- */
  --cl-font-base: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --cl-font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --cl-fs-xs: 0.75rem;
  --cl-fs-sm: 0.8125rem;
  --cl-fs-base: 0.9375rem;
  --cl-fs-md: 1.0625rem;
  --cl-fs-lg: 1.25rem;
  --cl-fs-xl: 1.5rem;
  --cl-fs-2xl: 1.875rem;

  --cl-fw-regular: 400;
  --cl-fw-medium: 500;
  --cl-fw-semibold: 600;
  --cl-fw-bold: 700;

  --cl-lh-tight: 1.25;
  --cl-lh-base: 1.5;

  /* --- Espacements --- */
  --cl-space-1: 4px;
  --cl-space-2: 8px;
  --cl-space-3: 12px;
  --cl-space-4: 16px;
  --cl-space-5: 20px;
  --cl-space-6: 24px;
  --cl-space-8: 32px;
  --cl-space-10: 40px;
  --cl-space-12: 48px;
  --cl-space-16: 64px;

  /* --- Bordures --- */
  /* Rayons volontairement mesurés : jamais de cartes très arrondies. */
  --cl-radius-sm: 5px;
  --cl-radius-md: 8px;
  --cl-radius-lg: 12px;
  --cl-radius-full: 999px;
  --cl-border-color: var(--cl-gray-200);
  --cl-border-width: 1px;

  /* --- Ombres (discrètes, teintées de bleu nuit) --- */
  --cl-shadow-sm: 0 1px 2px rgba(16, 42, 67, 0.05);
  --cl-shadow-md: 0 3px 10px rgba(16, 42, 67, 0.07);
  --cl-shadow-lg: 0 10px 28px rgba(16, 42, 67, 0.12);
  --cl-shadow-focus: 0 0 0 3px rgba(36, 96, 143, 0.35);

  /* --- Transitions --- */
  --cl-transition-fast: 120ms ease;
  --cl-transition-base: 200ms ease;

  /* --- Layout --- */
  --cl-sidebar-width: 248px;
  --cl-header-height: 64px;
  --cl-content-max-width: 1440px;

  /* --- z-index --- */
  --cl-z-header: 100;
  --cl-z-sidebar: 90;
  --cl-z-dropdown: 200;
  --cl-z-modal: 300;
  --cl-z-toast: 400;
}

[dir="rtl"] {
  --cl-font-base: var(--cl-font-ar);
}