/*
============================================================================
PROJECTE: Motor Educatiu Step Quiz (Vanilla JS)
FITXER: css/tokens.css
ROL: Colors comuns AMB SIGNIFICAT (text, vores, encert, error, avís).
ARQUITECTURA:
- Font única d'aquests colors per a totes les pàgines de l'arrel. Cap altre
  fitxer els ha de redefinir (tests/check-repo.js ho comprova).
- Els colors de TEMA de cada activitat (--primary, --primary-light,
  --primary-dark, --primary-hover, --bg-color, --accent…) NO són aquí: cada
  activitat té el seu i es defineixen al seu propi CSS.
- Els valors d'estat compleixen el contrast WCAG AA (≥ 4,5:1) sobre blanc,
  tant com a color de text com amb text blanc a sobre.
- Les carpetes cb/, app/ i gem4eso/ són projectes a part amb paleta pròpia.
DEPENDÈNCIES: Cap. S'ha de carregar ABANS de qualsevol altre CSS.
============================================================================
*/
:root {
    /* Text */
    --text-main: #1e293b;
    --text-muted: #64748b; /* 4,76:1 sobre blanc */

    /* Fons i vores */
    --panel-bg: #ffffff;
    --border-light: #e2e8f0;
    --border-color: #e2e8f0;
    --border-heavy: #cbd5e1;
    --border-strong: #94a3b8; /* vores de controls que s'han de distingir bé (p. ex. cercles d'opció) */

    /* Estats */
    --success: #047857; /* 5,48:1 — el mateix verd del «Molt bé!» */
    --success-light: #d1fae5;
    --danger: #dc2626; /* 4,83:1 */
    --danger-light: #fee2e2;
    --warning: #d97706;
}