/* =====================================================================
   VARIABLES.CSS — Optinova CRM
   Fichier unique et central pour toutes les couleurs, tailles de texte,
   formes et espacements de l'application.

   RÈGLE D'OR : aucune couleur, taille de police, coin arrondi ou padding
   ne devrait jamais être écrit en dur ailleurs dans le code — toujours
   passer par une de ces variables avec var(--nom-variable).
   ===================================================================== */

:root {

  /* ---------- FONDS ---------- */
  --bg: #0A0D13;          /* Fond d'écran général de toute l'application */
  --surface: #161B26;     /* Fond des cartes/blocs */
  --surface-2: #1D2330;   /* Fond des éléments à l'intérieur des cartes (champs, lignes de liste) */
  --border: #39435A;      /* Couleur de toutes les bordures / lignes de séparation */

  /* ---------- TEXTE ---------- */
  --text: #F5F0E8;        /* Couleur du texte principal */
  --text-muted: #A9AFBC;  /* Texte secondaire — labels, sous-titres, placeholders */

  /* ---------- MARQUE ---------- */
  --accent: #70CECD;       /* Couleur de marque — boutons principaux, onglets actifs, sélections */
  --accent-dim: #3D6F6E;   /* Version sourde du turquoise (texte/icônes discrets) */
  --accent-hover: #0D2F52; /* Couleur de survol des boutons/éléments turquoise */

  /* ---------- STATUTS ---------- */
  --safety: #F5A623;   /* Orange — action requise / en attente (aussi : badge de rôle Gestionnaire) */
  --danger: #E8735C;   /* Rouge — problème (aussi : montants dus affichés en rouge) */
  --info: #8FA8FF;     /* Bleu clair — envoyé / en cours */
  --purple: #C4A6FF;   /* Mauve — en soumission / reçue */
  --success: #3FB950;  /* Vert — terminé / positif (vert succès dark, réf. GitHub) */

  /* ---------- FONDS PÂLES (tints) — derrière badges/icônes ---------- */
  --accent-tint: rgba(112,206,205,.15);
  --safety-tint: rgba(245,166,35,.15);
  --info-tint: rgba(143,168,255,.15);
  --success-tint: rgba(63,185,80,.15);
  --purple-tint: rgba(196,166,255,.15);
  --danger-tint: rgba(226,75,74,.10);

  /* ---------- TAILLES DE TEXTE ---------- */
  --font-xs: 10px;    /* Micro-texte (badges calendrier, petites étiquettes) */
  --font-sm: 11px;    /* Labels de champs, texte secondaire */
  --font-base: 13px;  /* Texte courant + champs de formulaire (standard principal de l'app) */
  --font-md: 14px;    /* Taille de base de toute l'app (menu, titres de carte, écran de connexion) */
  --font-lg: 16px;    /* Titres de popup/modal, valeurs de statistiques, montants dus */
  --font-xl: 20px;    /* Titres de page/écran */
  --font-2xl: 28px;   /* Gros chiffres de stats (ex: feuille de temps) */

  /* ---------- FORMES (coins arrondis) ---------- */
  --radius-xs: 4px;      /* Micro-détails (éléments du calendrier) */
  --radius-sm: 7px;      /* Petits contrôles (case à cocher, petites icônes-boutons) */
  --radius-md: 10px;     /* Standard de base — boutons, champs, cartes de liste */
  --radius: 14px;        /* Cartes principales, popups, menus déroulants */
  --radius-circle: 50%;  /* Cercles parfaits (avatars, points de statut) */
  --radius-pill: 99px;   /* Badges/étiquettes en forme de pilule */

  /* ---------- ESPACEMENTS (padding) ---------- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 24px;       /* Titre de page → première carte — seul cas plus grand que l'échelle, standardisé 2026-09-17 */

  /* ---------- ICÔNE CSS ---------- */
  /* Flèche des <select> — remplace la flèche native du navigateur (qui ne
     suit pas color-scheme de façon cohérente selon l'OS) par le même
     chevron que le reste de l'app. Couleur figée en dur ici (une icône de
     fond ne peut pas lire var(--text-muted)) mais copiée depuis cette
     seule variable, jamais dupliquée ailleurs — voir body.mode-lisible
     pour l'équivalent clair. */
  --icon-chevron-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9AFBC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* =====================================================================
   MODE HAUTE LISIBILITÉ (façon Concur — gris/blanc, cartes avec relief léger)
   Ne redéfinit QUE les couleurs qui changent en mode clair — les tailles
   de texte, formes et espacements restent identiques dans les deux modes.
   ===================================================================== */
body.mode-lisible {
  --bg: #F3F4F6;
  --surface: #FFFFFF;
  --surface-2: #EDEEF1;
  --border: #DDE0E5;
  --text: #1F2328;
  --text-muted: #5F6B7A;
  --accent: #00726F;
  --accent-dim: #00726F;
  /* Le survol des boutons passe le texte en --text (foncé, voir .btn-primary:hover
     dans composants.css) — il faut donc un fond CLAIR ici, contrairement au mode
     sombre où --accent-hover assombrit un accent déjà clair. Sans cette ligne,
     un bouton turquoise foncé survolait vers un bleu marine presque aussi foncé :
     changement à peine visible, et texte foncé illisible dessus. */
  --accent-hover: #70CECD;
  --safety: #8A5A00;
  --danger: #B3261E;
  --info: #0B4DA8;
  --purple: #5B2FA6;
  --success: #1A7F37;
  /* Fonds pâles des badges (voir --*-tint dans la section "FONDS PÂLES" plus
     haut) : ceux du mode sombre sont des rgba() codés en dur, calculés pour
     ressortir sur un fond quasi noir — sur un fond blanc, le même mélange
     à 15% d'opacité disparaît presque. On les recalcule ici avec color-mix()
     à partir des couleurs DE CE mode (pas celles du mode sombre), mélangées
     avec du blanc — sinon le texte du badge (déjà en --info/--danger/etc. du
     mode lisible) ne matchait plus du tout avec son propre fond. */
  --accent-tint: color-mix(in srgb, var(--accent) 15%, white);
  --safety-tint: color-mix(in srgb, var(--safety) 15%, white);
  --info-tint: color-mix(in srgb, var(--info) 15%, white);
  --success-tint: color-mix(in srgb, var(--success) 15%, white);
  --purple-tint: color-mix(in srgb, var(--purple) 15%, white);
  --danger-tint: color-mix(in srgb, var(--danger) 15%, white);
  color-scheme: light;
  --icon-chevron-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}