/* =====================================================================
   PlanèteQuiz — design tokens
   Source de vérité : design/STYLE.md §2.
   À utiliser PARTOUT — jamais de couleur en dur dans app.css ou ailleurs.
   ===================================================================== */

:root {
  /* — Couleurs de marque (univers spatial : bleu/indigo) — */
  --pq-primary:        #2B4FD6;
  --pq-primary-dark:   #1E3AA8;
  --pq-primary-soft:   #E8EDFB;
  --pq-secondary:      #18BFB8;
  --pq-accent:         #FF8A3D;

  /* — Neutres — */
  --pq-bg:             #F4F7FB;
  --pq-surface:        #FFFFFF;
  --pq-border:         #E2E8F0;
  --pq-text:           #1F2937;
  --pq-text-muted:     #6B7280;

  /* — Code de MAÎTRISE (standard EN : A / ECA / NA) — */
  --pq-maitrise:       #43A047;
  --pq-encours:        #F6C026;
  --pq-fragile:        #E2574C;
  --pq-nonevalue:      #C2C8D0;

  /* — Sémantique d'état — */
  --pq-success:        #43A047;
  --pq-warning:        #F6C026;
  --pq-danger:         #E2574C;
  --pq-info:           #2B4FD6;

  /* — Couleurs par matière — */
  --pq-mat-francais:   #2B4FD6;
  --pq-mat-maths:      #7C4DFF;
  --pq-mat-histoire:   #C77D2E;
  --pq-mat-geo:        #18A97B;

  /* — Rayons, ombres — */
  --pq-radius-sm:   8px;
  --pq-radius:     12px;
  --pq-radius-lg:  20px;
  --pq-radius-pill: 999px;
  --pq-shadow:    0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --pq-shadow-md: 0 4px 12px rgba(16,24,40,.10);

  /* — Espacement (multiples de 4) — */
  --pq-1:  4px;
  --pq-2:  8px;
  --pq-3: 12px;
  --pq-4: 16px;
  --pq-5: 24px;
  --pq-6: 32px;
  --pq-7: 48px;
  --pq-8: 64px;
}