/* ==========================================================================
   La classe de Joha — charte graphique partagée
   Source : code de la vitrine laclassedejoha.com (globals.css, Hero.tsx).
   Référence complète (couleurs, typo, justification, contrastes) :
   voir le document "La classe de Joha — Charte graphique" partagé avec Johanna.
   Ne pas dupliquer ces valeurs dans les fichiers de chapitre : les faire
   pointer ici avec <link rel="stylesheet" href="../../shared/brand.css">
   (adapter le chemin relatif selon la profondeur du dossier), puis utiliser
   var(--nom-du-token) dans le CSS de la page.
   ========================================================================== */

:root {
  /* Bleu marine (confirmé vitrine) */
  --marine-900: #1E3A8A; /* texte, boutons primaires */
  --marine-600: #3C63C8; /* liens, survols, dégradés */
  --marine-300: #5B85E0; /* dégradés décoratifs uniquement, jamais en texte */
  --marine-100: #EEF1FE; /* fond pâle (cartes, puces, badges de niveau) */

  /* Rouge corail (confirmé vitrine) */
  --rouge-700: #B8423F; /* texte d'erreur, ombre de bouton */
  --rouge-600: #FF6B6B; /* fond des boutons d'action (CTA), accents */
  --rouge-100: #FFECEC; /* fond pâle, état "incorrect" */

  /* Or / jaune (confirmé vitrine) */
  --or-700: #7A6000; /* seule nuance utilisable en texte sur fond clair */
  --or-500: #FDE047; /* bordures, icônes, badges — jamais en texte */
  --or-100: #FFF9DB; /* fond pâle, badges de réussite */

  /* Accent décoratif (confirmé vitrine, blobs uniquement) */
  --decor-violet: #A78BFA;

  /* Vert sémantique (dérivé — réponse correcte, ne jamais remplacer par une couleur de marque) */
  --succes-600: #1F9D55;
  --succes-100: #E7F9EF;

  /* Neutres */
  --ink: #171717;       /* texte principal — identique à la vitrine */
  --ink-soft: #54617E;  /* texte secondaire / discret */
  --surface: #F4F6FA;   /* fond de page (app) */
  --surface-card: #FFFFFF; /* cartes, modales — identique à la vitrine */
  --border: #E2E8F4;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* Typographie : Baloo 2 (titres) + Nunito (texte courant) */
  --font-display: 'Baloo 2', 'Nunito', sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}