/* ==========================================================================
   JETONS DU DESIGN SYSTEM
   ==========================================================================

   Ce fichier est la source unique des couleurs, tailles, espacements et
   rayons de toute la plateforme.

   RÈGLE NON NÉGOCIABLE : aucun autre fichier CSS n'écrit une couleur, une
   taille de police ou un espacement en dur. Tout passe par les variables
   définies ici. C'est ce qui garantit que le thème sombre fonctionne
   partout, et qu'un changement de palette se fait en un seul endroit.

   Les trois blocs de couleurs :
     1. :root                        -> thème clair (valeurs par défaut)
     2. @media (prefers-color-scheme: dark) + :root:not([data-theme="light"])
                                     -> thème sombre suivi du système
     3. :root[data-theme="dark"]     -> thème sombre choisi explicitement

   Le bloc 2 est désactivé quand l'utilisateur a choisi « Clair » : c'est le
   rôle du :not([data-theme="light"]).
   ========================================================================== */

:root {
  /* ---- Couleurs : thème clair ------------------------------------------ */
  --bg: #f7f7f8;              /* fond de page */
  --surface: #ffffff;         /* cartes, panneaux */
  --surface-2: #f1f1f3;       /* survol, zones secondaires */
  --border: #e4e4e7;          /* bordures */
  --border-strong: #d1d1d6;   /* bordures de champs, plus visibles */

  --text: #18181b;            /* texte principal */
  --text-muted: #52525b;      /* texte secondaire */
  --text-subtle: #6b6b75;     /* métadonnées, dates */

  --accent: #4f46e5;          /* action principale, liens, élément actif */
  --accent-hover: #4338ca;
  --on-accent: #ffffff;       /* texte posé sur l'accent */
  --accent-soft: #eef2ff;     /* fond d'élément actif */

  --success: #146b34;
  --success-soft: #dcfce7;
  --warning: #a74b07;
  --warning-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --info: #1d4ed8;
  --info-soft: #dbeafe;

  /* Ombres : très légères en clair. Elles sont annulées en sombre. */
  --shadow-1: 0 1px 2px rgba(24, 24, 27, 0.05);
  --shadow-2: 0 1px 3px rgba(24, 24, 27, 0.08), 0 4px 12px rgba(24, 24, 27, 0.06);
  --shadow-3: 0 2px 6px rgba(24, 24, 27, 0.08), 0 12px 32px rgba(24, 24, 27, 0.1);

  /* Indique au navigateur quel thème est actif, pour que les éléments
     natifs (barres de défilement, sélecteurs de date) s'y adaptent. */
  color-scheme: light;

  /* ---- Teintes des avatars --------------------------------------------- */
  /* 8 teintes, lisibles dans les deux thèmes. La couleur d'un avatar est
     déduite du nom de la personne : elle ne change jamais. */
  --avatar-1-bg: #e0e7ff;  --avatar-1-text: #3730a3;
  --avatar-2-bg: #dcfce7;  --avatar-2-text: #14532d;
  --avatar-3-bg: #fee2e2;  --avatar-3-text: #991b1b;
  --avatar-4-bg: #fef3c7;  --avatar-4-text: #854d0e;
  --avatar-5-bg: #dbeafe;  --avatar-5-text: #1e3a8a;
  --avatar-6-bg: #f3e8ff;  --avatar-6-text: #6b21a8;
  --avatar-7-bg: #ccfbf1;  --avatar-7-text: #115e59;
  --avatar-8-bg: #ffe4e6;  --avatar-8-text: #9f1239;

  /* ---- Typographie ----------------------------------------------------- */
  /* Inter et JetBrains Mono sont auto-hébergées (voir base.css).
     Les polices système servent de secours : si les fichiers woff2 ne sont
     pas encore en place, la page reste propre. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono",
    Consolas, "Liberation Mono", monospace;

  /* Échelle : 12 / 14 / 16 (base) / 20 / 24 / 32 */
  --text-xs: 0.75rem;    /* 12 px — métadonnées, pastilles */
  --text-sm: 0.875rem;   /* 14 px — libellés, texte secondaire */
  --text-base: 1rem;     /* 16 px — texte courant */
  --text-lg: 1.25rem;    /* 20 px — titres de carte */
  --text-xl: 1.5rem;     /* 24 px — titres de section */
  --text-2xl: 2rem;      /* 32 px — titre de page */

  --weight-normal: 400;  /* texte */
  --weight-medium: 500;  /* libellés, boutons */
  --weight-semibold: 600;/* titres */

  --leading-text: 1.5;   /* interligne du texte */
  --leading-title: 1.2;  /* interligne des titres */
  --tracking-title: -0.01em; /* léger resserrement à partir de 20 px */

  /* ---- Espacements (base de 4 px) -------------------------------------- */
  --space-1: 0.25rem;  /*  4 px */
  --space-2: 0.5rem;   /*  8 px */
  --space-3: 0.75rem;  /* 12 px */
  --space-4: 1rem;     /* 16 px */
  --space-6: 1.5rem;   /* 24 px */
  --space-8: 2rem;     /* 32 px */
  --space-12: 3rem;    /* 48 px */
  --space-16: 4rem;    /* 64 px */

  /* ---- Rayons ---------------------------------------------------------- */
  --radius-sm: 6px;    /* boutons, champs */
  --radius-md: 10px;   /* cartes, panneaux */
  --radius-full: 999px;/* pastilles, avatars */

  /* ---- Mise en page ---------------------------------------------------- */
  --largeur-contenu: 960px;  /* largeur maximale du contenu */
  --largeur-barre-laterale: 260px;
  --hauteur-barre-mobile: 56px;
  --cible-tactile: 40px;     /* zone cliquable minimale sur mobile */

  /* ---- Mouvement ------------------------------------------------------- */
  --transition: 150ms ease;

  /* ---- Focus ----------------------------------------------------------- */
  --focus-epaisseur: 2px;
  --focus-decalage: 2px;
}

/* --------------------------------------------------------------------------
   THÈME SOMBRE suivi du système.
   Ne s'applique pas si l'utilisateur a explicitement choisi « Clair ».
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f12;
    --surface: #17171c;
    --surface-2: #1f1f26;
    --border: #2a2a33;
    --border-strong: #3a3a45;

    --text: #f4f4f5;
    --text-muted: #a1a1aa;
    --text-subtle: #8b8b94;

    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --on-accent: #0f0f12;
    --accent-soft: rgba(129, 140, 248, 0.14);

    --success: #4ade80;
    --success-soft: rgba(74, 222, 128, 0.12);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, 0.12);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.12);
    --info: #60a5fa;
    --info-soft: rgba(96, 165, 250, 0.12);

    /* Aucune ombre en sombre : une ombre noire sur un fond noir ne se voit
       pas. Ce sont les bordures et les surfaces plus claires qui donnent
       le relief. */
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;

    color-scheme: dark;

    --avatar-1-bg: rgba(129, 140, 248, 0.18);  --avatar-1-text: #c7d2fe;
    --avatar-2-bg: rgba(74, 222, 128, 0.16);   --avatar-2-text: #bbf7d0;
    --avatar-3-bg: rgba(248, 113, 113, 0.16);  --avatar-3-text: #fecaca;
    --avatar-4-bg: rgba(251, 191, 36, 0.16);   --avatar-4-text: #fde68a;
    --avatar-5-bg: rgba(96, 165, 250, 0.16);   --avatar-5-text: #bfdbfe;
    --avatar-6-bg: rgba(192, 132, 252, 0.16);  --avatar-6-text: #e9d5ff;
    --avatar-7-bg: rgba(45, 212, 191, 0.16);   --avatar-7-text: #99f6e4;
    --avatar-8-bg: rgba(251, 113, 133, 0.16);  --avatar-8-text: #fecdd3;
  }
}

/* --------------------------------------------------------------------------
   THÈME SOMBRE choisi explicitement par l'utilisateur.
   Mêmes valeurs que ci-dessus, mais indépendantes du réglage du système.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg: #0f0f12;
  --surface: #17171c;
  --surface-2: #1f1f26;
  --border: #2a2a33;
  --border-strong: #3a3a45;

  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --text-subtle: #8b8b94;

  --accent: #818cf8;
  --accent-hover: #a5b4fc;
  --on-accent: #0f0f12;
  --accent-soft: rgba(129, 140, 248, 0.14);

  --success: #4ade80;
  --success-soft: rgba(74, 222, 128, 0.12);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.12);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.12);

  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;

  color-scheme: dark;

  --avatar-1-bg: rgba(129, 140, 248, 0.18);  --avatar-1-text: #c7d2fe;
  --avatar-2-bg: rgba(74, 222, 128, 0.16);   --avatar-2-text: #bbf7d0;
  --avatar-3-bg: rgba(248, 113, 113, 0.16);  --avatar-3-text: #fecaca;
  --avatar-4-bg: rgba(251, 191, 36, 0.16);   --avatar-4-text: #fde68a;
  --avatar-5-bg: rgba(96, 165, 250, 0.16);   --avatar-5-text: #bfdbfe;
  --avatar-6-bg: rgba(192, 132, 252, 0.16);  --avatar-6-text: #e9d5ff;
  --avatar-7-bg: rgba(45, 212, 191, 0.16);   --avatar-7-text: #99f6e4;
  --avatar-8-bg: rgba(251, 113, 133, 0.16);  --avatar-8-text: #fecdd3;
}