/*
  Design tokens — extraits de la maquette Claude Design
  (« cours.express - Système & maquettes.dc.html », planches 1a et 2a/2b).
  Toute évolution de palette/typo passe par ce fichier.
*/
:root{
  /* Neutres — "cahier de révision" */
  --paper:      #FBF9F4; /* fond de page */
  --surface:    #FAF8F3; /* cartes, encadrés */
  --white:      #FFFFFF;
  --ink:        #16202B; /* texte principal, titres */
  --ink-2:      #4A5563; /* texte courant */
  --line:       #E4E0D6; /* bordures, séparateurs */
  --line-2:     #CFCAC0; /* bordures plus marquées */
  --key-bg:     #F1EEE6; /* fond neutre (touches/quiz non sélectionné) */

  /* Accent global (le teal du cycle collège sert aussi de couleur d'action générale) */
  --accent:      #0F7C8A;
  --accent-dark: #0B5F6A;
  --accent-tint: #DDF0F2;

  /* Surligneur / repères scolaires */
  --marker:      #F2C230; /* pastille du logo */
  --highlight:   #FFE27A; /* surligneur */

  /* Cycle primaire — CP à CM2 */
  --primaire:      #D9622B;
  --primaire-dark: #A8461A;
  --primaire-tint: #FCEADC;
  --primaire-pale: #FBF2EA;

  /* Cycle collège — 6e à 3e */
  --college:      #0F7C8A;
  --college-dark: #0B5F6A;
  --college-tint: #DDF0F2;
  --college-pale: #EDF6F5;

  /* Cycle lycée — 2de à Terminale */
  --lycee:      #34529E;
  --lycee-dark: #243B78;
  --lycee-tint: #E4E9F6;
  --lycee-pale: #EEF0FA;

  /* États de réponse (quiz) */
  --ok:      #1F7A44;
  --ok-tint: #E3F2E8;
  --ko:      #B93A2B;
  --ko-dark: #8E2A1F;
  --ko-tint: #FBE6E2;
  --warn-tint: #FFF6D1;
  --warn-dark: #6B5200;

  /* Typo */
  --font-text: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-head: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, Menlo, monospace;

  /* Rayons / ombres communs à tous les composants */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --shadow-card: 0 1px 3px rgba(0,0,0,.06);

  /* Colonne de lecture (cours) */
  --measure: 68ch;
}

/* Mise en correspondance cycle -> variables neutres, pour que les gabarits
   n'aient qu'à écrire var(--cycle-*) et poser data-cycle="primaire|college|lycee" sur <body>. */
body[data-cycle="primaire"]{ --cycle: var(--primaire); --cycle-dark: var(--primaire-dark); --cycle-tint: var(--primaire-tint); }
body[data-cycle="college"]{  --cycle: var(--college);  --cycle-dark: var(--college-dark);  --cycle-tint: var(--college-tint); }
body[data-cycle="lycee"]{    --cycle: var(--lycee);    --cycle-dark: var(--lycee-dark);    --cycle-tint: var(--lycee-tint); }