/* core/tokens.css

   Variables : couleurs des deux thèmes, espacements, largeurs, plans d'empilement.

   Chargé par index.html, dans l'ordre de css/README.md. Ne pas changer cet
   ordre sans relire la section « Ordre de chargement ».

   Palette bleue adoptée depuis les maquettes (need-academy-dashboards.html,
   sept. 2026 ; need-academy-homepage-v2.html) : elle remplace l'ancien
   système bleu nuit / or comme couleur d'action, dans les deux thèmes. L'or
   a été retiré partout, y compris comme accent secondaire. Le mode sombre
   reste le thème par défaut du produit ; seules ses couleurs changent. */

:root {
  /* Le bleu nuit du logo Unlock English. Mode clair : couleur des boutons
     principaux. Mode sombre : il teinte les fonds. */
  --brand: #2B2560;

  --bg: #0F0E1E;
  --surface: #1D1B33;
  --surface-2: #252242;
  --border: #322F52;
  --border-strong: #423E66;
  --text: #EEEDF8;
  --muted: #A6A3BF;
  --green: #4CC38A;
  --green-tint: rgba(76, 195, 138, .16);
  --red: #FF8A80;
  --red-tint: rgba(255, 138, 128, .16);

  /* Couleur d'action : boutons principaux, progression, sélection, focus.
     Mode sombre : un indigo clair, texte foncé dessus. Mode clair : le bleu
     nuit du logo, texte blanc. --on-primary : texte posé sur --primary. */
  --primary: #8B84F4;
  --primary-strong: #A9A3FF;
  --primary-tint: rgba(139, 132, 244, .18);
  --on-primary: #0F0E1E;

  /* Fond translucide flouté : en-tête et barres flottantes seulement. */
  --glass: rgba(29, 27, 51, .72);
  --glass-blur: blur(24px) saturate(160%);

  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Geist', 'Segoe UI', system-ui, sans-serif;
  --serif: Charter, 'Iowan Old Style', Georgia, serif;
  --r: 10px;

  /* Ombre de carte, très légère : le mode sombre en a besoin d'être plus
     marquée que le mode clair pour se voir sur un fond déjà sombre. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35);

  /* Échelle typographique. Reprend les tailles déjà majoritaires dans le
     code plutôt que d'en inventer de nouvelles : converger, pas réinventer.
       fs-1  méta, étiquettes, texte le plus discret
       fs-2  UI dense (tableaux, tags)
       fs-3  texte secondaire
       fs-4  corps de texte (= la taille de base posée sur html/body)
       fs-5  texte mis en avant, chapô
       fs-6  titre de carte, de section
       fs-7  titre de page
       fs-8  grand titre (résultat, score)
       fs-9  titre d'accueil, plein écran */
  --fs-1: 12px;
  --fs-2: 13px;
  --fs-3: 14px;
  --fs-4: 15px;
  --fs-5: 17px;
  --fs-6: 20px;
  --fs-7: 24px;
  --fs-8: 32px;
  --fs-9: 44px;

  /* Rayons de bordure : trois crans, alignés sur les maquettes (boutons/tags
     8px, cartes/panneaux 12px, cadres de page 16px). */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  /* Espacements : on n'en invente pas d'autres composant par composant. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 80px;

  /* Largeurs : un écran de travail, une leçon, une ligne de lecture.
     L'en-tête et le contenu partagent --w-content : leurs bords s'alignent.
     1200 px laisse la navigation publique (environ 1 090 px) tenir sur une
     rangée dès 1 140 px d'écran ; le texte, lui, reste borné par --w-read. */
  --w-content: 1200px;
  --w-lesson: 880px;
  --w-read: 720px;
  --gutter: 24px;

  /* Hauteur d'en-tête : valeur de départ seulement. core/header.js publie la
     hauteur réellement rendue dès le premier affichage. */
  --header-h: 64px;

  /* Plans d'empilement, du plus bas au plus haut. */
  --z-header: 30;
  --z-menu: 35;
  --z-toast: 60;
  --z-modal: 80;
}

/* Thème clair : seules les variables changent, aucune règle n'est dupliquée. */

:root[data-theme="light"] {
  --bg: #F3F3F8;
  --surface: #ffffff;
  --surface-2: #F7F7FB;
  --border: #E3E2EE;
  --border-strong: #CFCDE0;
  --text: #12112A;
  --muted: #5D5B73;
  --green: #1E7A4C;
  --green-tint: #E8F4EE;
  --red: #B3261E;
  --red-tint: #FBECEB;

  --primary: var(--brand);
  --primary-strong: #3F38A8;
  --primary-tint: #ECEBF7;
  --on-primary: #ffffff;

  --glass: rgba(255, 255, 255, .72);
  --shadow-card: 0 1px 2px rgba(20, 18, 45, .05);
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}