/* Jetons de Méninges : primitives par teinte, puis rôles. Les composants n'utilisent que les rôles. */
:root {
  color-scheme: dark;

  /* Primitives : le plateau (bleu nuit #14123a, teinte 280). Mêmes teinte et pente en OKLCH. */
  --studio-950: #090823;
  --studio-900: #14123a;
  --studio-850: #1f1f46;
  --studio-800: #2a2b55;
  --studio-700: #3e406b;
  --studio-500: #9498bf;
  --studio-300: #b8bbdb;
  --studio-100: #e5e7f3;
  --studio-50: #f6f6fc;

  /* Primitives : fiches cartonnées */
  --fiche-papier: #faf6ee;
  --fiche-ombre: #e4ddcf;
  --fiche-encre: #141423;
  --fiche-encre-2: #4a4b5d;

  /* Primitives : lumières du studio */
  --projecteur: 255 238 210; /* blanc chaud des projecteurs, en canaux RVB pour doser l'opacité */
  --ambre: #ffc845;
  --ambre-fonce: #9b6406;
  --rouge-buzzer: #ce2a29;
  --rouge-buzzer-haut: #e6443d;
  --rouge-buzzer-fonce: #a92321;

  /* Primitives : les 4 familles (une couleur franche chacune) */
  --violet-memoire: #b58bf9;
  --turquoise-attention: #43d5dc;
  --vert-calcul: #7ed86a;
  --rose-problemes: #f47db9;
  --violet-memoire-encre: #6635a3;
  --turquoise-attention-encre: #056774;
  --vert-calcul-encre: #256c2c;
  --rose-problemes-encre: #9a265f;

  /* Rôles */
  --fond: var(--studio-900);
  --fond-2: var(--studio-950);
  --surface: var(--studio-850);
  --surface-haute: var(--studio-800);
  --trait: var(--studio-700);
  --texte: var(--studio-50);
  --texte-2: var(--studio-300);
  --texte-3: var(--studio-500);
  --points: var(--ambre);
  --erreur: var(--rouge-buzzer);
  --focus: var(--ambre);
  --fiche: var(--fiche-papier);
  --encre: var(--fiche-encre);
  --encre-2: var(--fiche-encre-2);

  /* Famille courante : redéfinie par [data-famille] */
  --fam: var(--studio-300);
  --fam-encre: var(--fiche-encre);

  /* Typographie */
  --police-titre: "Anybody", "Arial Narrow", system-ui, sans-serif;
  --police-texte: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-ecran: clamp(2.25rem, 1.7rem + 2.6vw, 2.875rem);
  --t-titre: 1.5rem;
  --t-sous: 1.125rem;
  --t-corps: 1rem;
  --t-petit: 0.875rem;
  --t-etiquette: 0.8125rem;

  /* Un seul style de chiffres (du gros score au petit niveau) et une seule largeur pour les noms de jeux */
  --chiffres-largeur: 125%;
  --chiffres-graisse: 800;
  --nom-jeu-largeur: 100%;

  /* Espace (une seule cadence) */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;

  /* Rayons */
  --r-petit: 10px;
  --r-moyen: 16px;
  --r-grand: 24px;
  --r-pilule: 999px;

  /* Mouvement */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --d-appui: 140ms;
  --d-court: 200ms;
  --d-moyen: 260ms;

  /* Profondeur (décalage et flou, jamais de bloc dur) */
  --ombre-pupitre: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 18px 32px -18px rgb(0 0 0 / 0.75);
  --ombre-fiche: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 24px 40px -22px rgb(0 0 0 / 0.75);
  --ombre-tuile: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 6px 14px -8px rgb(0 0 0 / 0.6);
}

[data-famille="memoire"] { --fam: var(--violet-memoire); --fam-encre: var(--violet-memoire-encre); }
[data-famille="attention"] { --fam: var(--turquoise-attention); --fam-encre: var(--turquoise-attention-encre); }
[data-famille="calcul"] { --fam: var(--vert-calcul); --fam-encre: var(--vert-calcul-encre); }
[data-famille="problemes"] { --fam: var(--rose-problemes); --fam-encre: var(--rose-problemes-encre); }