/* ARTHUR Éducation : tokens du système de design (couleurs claires et sombres, espacements, rayons, typographie). Palette « Chocolat chaud » (08/10).
   Généré depuis tokens.json le 08/10. Thème sombre : data-theme="dark" sur <html>. */
:root, [data-theme="light"] {
  --surface: #f8f3ea;
  --surface-raised: #fffcf6;
  --line: #e3d6c1;
  --line-strong: #9a8b7c;
  --ink: #2b211b;
  --ink-muted: #6b5d52;
  --primary: #2e6b73;
  --primary-deep: #1f4a50;
  --primary-ink: #1f4a50;
  --on-primary: #ffffff;
  --primary-soft: #e3efee;
  --accent: #e8b54a;
  --accent-deep: #b5862a;
  --accent-soft: #fbf0d6;
  --on-accent: #2b211b;
  --bouton-suite: #e8b54a;
  --on-bouton-suite: #2b211b;
  --highlight: #f7e2a8;
  --success: #46703b;
  --success-deep: #2f4d27;
  --success-soft: #e6eedc;
  --example: #9a5b2e;
  --example-deep: #6b3d1d;
  --example-soft: #f6e6d6;
  --danger: #a8412a;
  --danger-soft: #f8e3dc;
  --chart-orange: #b5862a;
  --copie-marge: #e3a492;
  --copie-grille: #ece3d3;
  --pause-grille: #d5e5e3;
  --briefing-bg: #2b211b;
  --briefing-ink: #fffaf1;
  --briefing-lab: #f2cf7f;
  --avatar-tete: #fffaf1;
  --avatar-cheveux: #3a2a22;
  --bloc-definition: #2e6b73;
  --bloc-propriete: #3d5f86;
  --bloc-theoreme: #2f4a63;
  --bloc-exemple: #9a5b2e;
  --bloc-methode: #86651c;
  --bloc-defi: #a24a5e;
  --bloc-cle: #5c7330;
  --bloc-synthese: #3f6f52;
  --bloc-question: #6e4a7e;
  --bloc-quiz: #574a86;
  --bloc-mission: #2b211b;
  --bloc-piege: #b2472f;
  --bloc-questions-manque: #6b5d52;
  --shadow-card: 0 1px 2px rgba(43, 33, 27, 0.07), 0 4px 16px rgba(43, 33, 27, 0.07);
}
[data-theme="dark"] {
  --surface: #1a1512;
  --surface-raised: #241d18;
  --line: #3a302a;
  --line-strong: #7d6f63;
  --ink: #f1e8da;
  --ink-muted: #bfb1a2;
  --primary: #7fc0c6;
  --primary-deep: #3f7f86;
  --primary-ink: #b5e0e3;
  --on-primary: #14100d;
  --primary-soft: #1f3335;
  --accent: #edc165;
  --accent-deep: #b5862a;
  --accent-soft: #3a2e15;
  --on-accent: #2b211b;
  --bouton-suite: #edc165;
  --on-bouton-suite: #2b211b;
  --highlight: #5a4515;
  --success: #8fc07f;
  --success-deep: #4f7a43;
  --success-soft: #1f2c1a;
  --example: #e0a77a;
  --example-deep: #9a5b2e;
  --example-soft: #34241a;
  --danger: #f08f78;
  --danger-soft: #3a1e17;
  --chart-orange: #edc165;
  --copie-marge: #7a4034;
  --copie-grille: #2e2620;
  --pause-grille: #263a3b;
  --briefing-bg: #2e2520;
  --briefing-ink: #ffffff;
  --briefing-lab: #f2cf7f;
  --avatar-tete: #f1e8da;
  --avatar-cheveux: #6b5244;
  --bloc-definition: #8cc3c9;
  --bloc-propriete: #a3bde0;
  --bloc-theoreme: #9fb3cf;
  --bloc-exemple: #e0ad86;
  --bloc-methode: #dcc27a;
  --bloc-defi: #e3a0b0;
  --bloc-cle: #bcd08a;
  --bloc-synthese: #9fcdb0;
  --bloc-question: #c9a8d6;
  --bloc-quiz: #b4a8e0;
  --bloc-mission: #d8cbbb;
  --bloc-piege: #f0a28f;
  --bloc-questions-manque: #c9bcb0;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.35);
}
:root {
  --space-1: 4px; /* Écart entre une icône et son libellé. */
  --space-2: 8px; /* Écart à l'intérieur d'un groupe : badges, éléments de liste. */
  --space-4: 16px; /* Marge intérieure des boutons (horizontale) et des petits encadrés ; marge latérale sur mobile. */
  --space-6: 24px; /* Marge intérieure des cartes et des encadrés de cours. */
  --space-8: 32px; /* Écart entre deux encadrés ou deux cartes. */
  --space-12: 48px; /* Écart entre deux sections de page. */
  --radius-sm: 8px; /* Champs de saisie, badges, petits boutons. */
  --radius-md: 14px; /* Boutons, encadrés de cours. */
  --radius-lg: 24px; /* Cartes de cours et de chapitre, grandes zones de mise en avant. */
  --radius-full: 999px; /* Pastilles, barres de progression, avatars. */
  --font-display: "Lexend", system-ui, sans-serif;
  --font-sans: "Lexend", system-ui, sans-serif;
  --text-display: 600 48px/56px var(--font-display); /* Grand titre de la page d'accueil et des pages de niveau. Une fois par page. */
  --text-h1: 600 34px/42px var(--font-display); /* Titre de chapitre ou de page. */
  --text-h2: 600 26px/34px var(--font-display); /* Titre de module ou de section. */
  --text-h3: 500 20px/28px var(--font-display); /* Titre d'encadré, d'exercice ou de carte. */
  --text-label: 500 14px/20px var(--font-display); /* Boutons, onglets, badges de niveau et de durée. */
  --text-body-lg: 400 18px/28px var(--font-sans); /* Texte de cours, énoncés d'exercices : la lecture longue. Lexend 400. */
  --text-body: 400 16px/24px var(--font-sans); /* Texte d'interface, descriptions de cartes, formulaires. */
  --text-caption: 400 13px/18px var(--font-sans); /* Légendes de figures, mentions, métadonnées, en `ink-muted`. */
}
.display {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 56px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.h1 {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 42px;
  font-weight: 600;
  letter-spacing: 0;
}
.h2 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
}