/* Couche 2 — seuls les rôles propres à l'entraînement.
   Les fondations et les deux thèmes viennent de gl-tokens.css. */
:root {
    /* Les verdicts servent aussi au texte : le mélange assure leur contraste. */
    --ok: color-mix(in oklch, var(--gl-success) 65%, var(--gl-text));
    --ok-wash: color-mix(in oklch, var(--gl-success-wash) 45%, var(--gl-surface));
    --err: var(--gl-critical-ink);
    --err-wash: color-mix(in oklch, var(--gl-critical-wash) 45%, var(--gl-surface));
    --warn: var(--gl-warning-ink);
    --early: var(--gl-accent-ink);
    --early-wash: color-mix(in oklch, var(--gl-accent-wash) 45%, var(--gl-surface));
    --late: var(--gl-warning-ink);
    --late-wash: color-mix(in oklch, var(--gl-warning) 12%, var(--gl-surface));
    --miss: var(--gl-text-2);
    --miss-wash: var(--gl-surface-sunken);

    /* Les mains gardent leurs couleurs dans tous les exercices. */
    --hand-left: var(--gl-accent-ink);
    --hand-right: var(--gl-warning-ink);
    --hand-left-wash: var(--early-wash);
    --hand-right-wash: var(--late-wash);

    /* Le clavier reste ivoire et encre, indépendamment du thème de la page. */
    --key-white: var(--gl-on-island);
    --key-black: var(--gl-island);
    --key-ink: var(--gl-island);
    --key-on-black: var(--gl-on-island);
    --key-edge: color-mix(in oklch, var(--key-black) 30%, var(--key-white));
    --key-left: color-mix(in oklch, var(--gl-accent) 28%, var(--key-white));
    --key-right: color-mix(in oklch, var(--gl-warning) 38%, var(--key-white));
    --key-ok: color-mix(in oklch, var(--gl-success) 48%, var(--key-white));
    --key-wrong: color-mix(in oklch, var(--gl-critical) 48%, var(--key-white));
    --key-warn: color-mix(in oklch, var(--gl-warning) 48%, var(--key-white));
    --key-ok-mark: color-mix(in oklch, var(--gl-success) 55%, var(--key-black));
    --key-wrong-mark: color-mix(in oklch, var(--gl-critical) 70%, var(--key-black));
    --key-neutral: color-mix(in oklch, var(--key-black) 20%, var(--key-white));

    /* Le canvas du rythme lit ces propriétés par getComputedStyle(). */
    --roll-pending: var(--gl-text-2);
    --roll-perfect: var(--ok);
    --roll-early: var(--early);
    --roll-late: var(--late);
    --roll-miss: var(--err);
    --roll-rest: var(--gl-text-2);
    --roll-beat: var(--gl-separator);
    --roll-bar: var(--gl-separator-strong);
    --roll-lane-label: var(--gl-text-2);
    --roll-playhead: var(--gl-ink);

    /* Intensité des jours joués dans l'historique. */
    --activity-0: var(--gl-surface-sunken);
    --activity-1: color-mix(in oklch, var(--gl-tint) 25%, var(--gl-surface));
    --activity-2: color-mix(in oklch, var(--gl-tint) 50%, var(--gl-surface));
    --activity-3: color-mix(in oklch, var(--gl-tint) 75%, var(--gl-surface));
    --activity-4: var(--gl-tint);
}