/* OlimpiApp — i vecchi nomi dei token, che puntano alla carta.
 *
 * I valori vivono in static/css/style.css (:root), una volta sola. Qui ci
 * sono solo ALIAS: i nomi che il tema scuro v4 e la scala v2 avevano dato
 * agli stessi ruoli — --bg-0, --text-1, --accent, --gold — e che decine di
 * template e di script usano ancora. Puntano ai token della carta, cosi'
 * un `var(--text-2)` rimasto in un template scrive con l'inchiostro giusto
 * invece che con un grigio da fondo scuro. Nessun valore proprio: se un
 * colore cambia, cambia in style.css e questi lo seguono.
 *
 * Quando un alias non e' piu' usato da nessuno, si toglie da qui.
 */
:root {
  /* superfici */
  --bg-0: var(--paper);
  --bg-1: var(--surface);
  --bg-2: var(--surface);
  --bg-3: var(--paper-2);
  --bg-void: var(--paper);
  --bg-base: var(--surface);
  --bg-raised: var(--surface);
  --bg-sunken: var(--paper-2);
  --bg-primary: var(--paper);
  --bg-surface: var(--surface);
  --bg-elevated: var(--surface);
  --bg-glass: var(--surface);
  --bg-glass-strong: var(--surface);
  --line-strong: var(--ink-3);

  /* testo */
  --text-1: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --text-4: var(--ink-3);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-tertiary: var(--ink-3);
  --text-muted: var(--ink-3);

  /* l'azione: il viola del tema scuro e' il blu d'inchiostro della carta */
  --accent: var(--primary);
  --accent-hover: var(--primary);
  --accent-dim: var(--primary-om);
  --accent-primary: var(--primary);
  --accent-primary-2: var(--primary);
  --accent-primary-soft: var(--primary-om);
  --accent-primary-glow: transparent;
  --accent-violet: var(--primary);
  --accent-violet-hover: var(--primary);
  --accent-violet-glow: transparent;
  --accent-indigo: var(--primary);
  --accent-hot: var(--error);

  /* i toni: XP e serie sull'oro scritto, esiti sui loro token */
  --gold: var(--reward-ink);
  --gold-dim: color-mix(in srgb, var(--reward) 35%, transparent);
  --tone-gold: var(--reward-ink);
  --accent-gold: var(--reward-ink);
  --accent-amber: var(--reward-ink);
  --tone-mint: var(--success);
  --accent-mint: var(--success);
  --accent-emerald: var(--success);
  --tone-coral: var(--error);
  --accent-coral: var(--error);
  --accent-red: var(--error);
  --tone-ice: var(--cs);
  --accent-cyan: var(--cs);
  --tone-lavender: var(--math);
  --tone-rose: var(--error);
  --warning: var(--reward-ink);
  --danger: var(--error);
  --info: var(--primary);

  /* i gradienti non esistono piu': chi li chiede ottiene un pieno */
  --gradient-primary: var(--primary);
  --gradient-hero: var(--primary);
  --gradient-hero-soft: var(--primary-om);
  --gradient-gold: var(--reward);
  --gradient-mint: var(--success);

  /* bordi */
  --border-subtle: var(--line);
  --border-default: var(--line);
  --border-strong: var(--ink-3);
  --border-focus: var(--primary);

  /* le materie, coi nomi lunghi: stesso valore del token corto */
  --math-color: var(--math);
  --cs-color: var(--cs);
  --physics-color: var(--physics);

  /* spazi e raggi della scala v2: stessi gradini della carta */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-xl: var(--radius-xl); --r-pill: var(--radius-pill);

  /* ombre: la carta ne ha una sola, e concorda con --shadow-glow in style.css */
  --shadow-1: var(--shadow-card);
  --shadow-2: var(--shadow-hover);
  --shadow-glow-accent: var(--shadow-card);

  /* tempi */
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 360ms;
  --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);

  /* i caratteri: i titoli non hanno un carattere loro */
  --font-brand: var(--sans);
}

/* ── il movimento standard (motion.js) ─────────────────────────────────── */
.motion-tappable { transition: transform 80ms var(--ease-apple); }
.motion-tappable:active { transform: scale(0.97); }
/* Una card che si tocca si abbassa appena: niente alone, la carta non brilla */
.motion-card { transition: transform 200ms var(--ease-apple), border-color 200ms var(--ease-apple); }
@media (hover: hover) {
  .motion-card:hover { transform: scale(1.01); border-color: var(--ink-3); }
}
/* Sbagliato: scuote di quattro pixel tre volte */
@keyframes motionShake {
  0%,100% { transform: translateX(0); }
  16% { transform: translateX(-4px); }
  33% { transform: translateX(4px); }
  50% { transform: translateX(-4px); }
  66% { transform: translateX(4px); }
  83% { transform: translateX(-4px); }
}
.motion-shake { animation: motionShake 320ms var(--ease-apple); }
/* Giusto: la card respira una volta, nel verde dell'esito */
@keyframes motionCorrectPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
  35% { transform: scale(1.015); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 25%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
.motion-correct { animation: motionCorrectPulse 560ms var(--ease-apple); }
/* La fiamma della serie non oscilla piu': era un'animazione infinita su
   un'icona da 15 pixel, e a schermo si leggeva come un tremolio. */
.motion-flame { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-shake, .motion-correct, .motion-flame,
  .motion-card, .motion-tappable { animation: none !important; transition: none !important; }
}

/* ── lo scheletro di una lista che carica ──────────────────────────────── */
@keyframes skelPulse { 0%,100% { opacity: .45; } 50% { opacity: .85; } }
.skeleton-row {
  height: 56px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--paper-2), var(--line-2), var(--paper-2));
  animation: skelPulse 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-row { animation: none !important; }
}
/* L'anello del focus (:focus-visible) ha UNA regola sola e sta in
   style.css: qui non se ne dichiara una seconda. */