/* =========================================================================
   rotatestudy · systeme de design · jetons (refonte 2026-10, direction B « Objet »)
   Seule source des valeurs : base.css, components.css, motion.css, le site public, les pages du Worker,
   le quiz et la fenetre de paiement lisent ces variables, jamais une couleur en dur.

   Deux themes pensés chacun pour lui-meme :
   - sombre (defaut) : noir profond ; les pages des fiches (#0b0c0d) se detachent comme des objets.
   - clair : gris aluminium froid ; un gris froid garde le bleu net (un papier chaud le jaunit).
   Une seule lumiere, en haut a gauche : --hi est le liseré du bord haut, --shadow-lift l'ombre qui tombe.
   Le bleu = ce sur quoi on agit. Vert = « Remember ». Orange = « Exam trap ». Pas de rouge.
   Les variantes -ink sont les memes couleurs en texte, au contraste AA sur le fond du theme.
   --focus (anneau clavier) et --line-strong (contour des champs) tiennent 3:1 sur le fond et les surfaces,
   --line reste le filet decoratif. scripts/contrastes.mjs controle tout.
   ========================================================================= */

/* ---- theme sombre (defaut), aussi pour un bloc data-theme="dark" pose dans une page claire ---- */
:root,[data-theme="dark"]{
  --bg:#050506;
  --surface:#0b0c0d;
  --surface-2:#121315;
  --ink:#f2f3f4;
  --dim:#9aa0a6;
  --line:#23262a;
  --line-strong:#646a71;
  --blue:#10AEEF;
  --blue-hover:#45c3f5;
  --blue-ink:#10AEEF;
  --on-blue:#0b0c0d;
  --focus:#10AEEF;
  --green:#2fbf71;
  --green-ink:#2fbf71;
  --orange:#f59e0b;
  --orange-ink:#f59e0b;
  --hi:rgba(255,255,255,.08);
  --shadow-lift:0 1px 2px rgba(0,0,0,.7),0 32px 72px -24px rgba(0,0,0,.95);
  --nav-bg:rgba(5,5,6,.72);
  --runway:rgba(242,243,244,.24);
  --plane:#E9EDF0;
  color-scheme:dark;
}

/* ---- theme clair ---- */
[data-theme="light"]{
  --bg:#eef0f2;
  --surface:#ffffff;
  --surface-2:#f6f7f8;
  --ink:#0b0c0d;
  --dim:#5c636b;
  --line:#d7dbe0;
  --line-strong:#80878f;
  --blue-hover:#3cbdf2;
  /* Texte bleu en clair : #0a78ab de la charte, assombri de 5 % (meme teinte) ; #0a78ab ne donne que
     4,29:1 sur le fond #eef0f2 (4,90:1 sur blanc). #0a72a2 : 4,66:1 sur le fond, 5,33:1 sur blanc. */
  --blue-ink:#0a72a2;
  --focus:#0a72a2;
  --green-ink:#1d7b45;
  --orange-ink:#a35711;
  --hi:#ffffff;
  --shadow-lift:0 1px 2px rgba(16,24,32,.14),0 32px 64px -24px rgba(16,24,32,.42);
  --nav-bg:rgba(238,240,242,.78);
  --runway:rgba(11,12,13,.3);
  --plane:#14212D;
  color-scheme:light;
}

/* ---- ce qui ne change pas avec le theme ---- */
:root{
  /* Deux polices, celles des fiches : Manrope 600 titres (700 pour deux accents au plus), Inter 400/500/600 texte.
     Le repli « fallback » est Arial reglee sur leurs mesures (fonts.css) : pas de saut a l'arrivee de la police. */
  --fd:'Manrope','Manrope fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fb:'Inter','Inter fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Echelle, de la plus petite a la plus grande : valeur a 390 px -> valeur a 1440 px, lineaire entre les deux.
     s1 14/13 legendes · s2 17/16 corps · s3 21/17 chapeau · s4 28/21 h3, portes · s5 60/30 h2
     s6 80/36 h1 · s7 124/46 le grand titre (« Then rotation. »). En rem : suit la taille de texte du lecteur. */
  --s1:clamp(.8125rem,.7893rem + .0952vw,.875rem);
  --s2:clamp(1rem,.9768rem + .0952vw,1.0625rem);
  --s3:clamp(1.0625rem,.9696rem + .381vw,1.3125rem);
  --s4:clamp(1.3125rem,1.1500rem + .6667vw,1.75rem);
  --s5:clamp(1.875rem,1.1786rem + 2.8571vw,3.75rem);
  --s6:clamp(2.25rem,1.2286rem + 4.1905vw,5rem);
  --s7:clamp(2.875rem,1.0643rem + 7.4286vw,7.75rem);
  --lh:1.55;

  /* Grille : 12 colonnes (6 sur iPad, 4 sur telephone), contenu 1128 px, gouttiere 24 (16 sur telephone).
     --pad : marge laterale de la page. Espacements : multiples de 8. */
  --col:1128px;
  --gap:24px;
  --pad:24px;
  --sp1:8px; --sp2:16px; --sp3:24px; --sp4:32px; --sp5:48px; --sp6:64px; --sp7:96px; --sp8:128px;
  --section:clamp(6rem,4.514rem + 6.095vw,10rem);
  --measure:66ch;
  --nav-h:56px;

  /* Rayons, un par famille : papier 3, ecran 22, surfaces 28, actions en pilule. Rien d'autre. */
  --r-paper:3px;
  --r-screen:22px;
  --r-surface:28px;
  --r-pill:999px;

  /* Mouvement : une seule courbe (depart franc, arrivee douce). Objets 400-700 ms, textes 250, survols 120. */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-object:560ms;
  --t-text:250ms;
  --t-hover:120ms;
}
@media (max-width:760px){
  :root{--gap:16px;--pad:16px;--nav-h:48px}
}