/* Token di design condivisi da TUTTE le pagine (scheda, dashboard, home, classifica),
   caricato prima del CSS specifico di ciascuna pagina. Un'unica fonte invece di tre
   copie leggermente diverse — è così che nascono le inconsistenze.

   Fonte: design token REALI del sito wgilab.eu (letti dal CSS compilato del tema,
   non stimati da un'immagine) + la cartella brand kit nel repo (WGI SOFTWARE - LOGO
   BRAND IDENTITY...): --text-color #353535, --text-light #868686, --accent-dark
   #5991fa, --accent-light #fc916e, font Roboto, gradiente firma a 2 tappe, ombra
   "0 .4rem 1rem rgba(0,0,0,.15)", angoli molto arrotondati.

   Tutto il progetto è deliberatamente SOLO chiaro (niente prefers-color-scheme dark):
   wgilab.eu è un sito solo chiaro, e avere due temi paralleli (uno per la classifica,
   uno per scheda/dashboard) creava incoerenza — un solo aspetto ovunque. */

/* Roboto self-hosted invece di @import da fonts.googleapis.com (2026-08-31):
   CLAUDE.md §11 impone "tutto offline... al ring può non esserci rete" — un
   @import a un dominio esterno per il font non rispettava quel vincolo.
   Verificato con la rete bloccata (Playwright, route.abort su
   fonts.googleapis.com/fonts.gstatic.com): il body ricadeva silenziosamente
   su un sans-serif di sistema, testo visibilmente diverso (metriche più
   larghe, wrapping diverso), nessun errore in console — un degrado silenzioso
   dell'identità WGI proprio nella condizione (offline) che il progetto dice
   di dover reggere.
   Due soli file invece di uno per peso: Google serve Roboto come VARIABLE
   FONT (un unico woff2 copre l'intero asse 100-900), la CSS2 API genera più
   regole @font-face che puntano tutte allo stesso file per comodità dei
   browser che non capiscono i range — qui basta un font-weight a range unico
   per sottoinsieme di caratteri (latin / latin-ext, quest'ultimo necessario
   per i caratteri cechi/slovacchi nei pedigree, es. "Katusického"). Bonus:
   risolve anche un secondo problema trovato nello stesso audit — il vecchio
   @import chiedeva solo i pesi 400/500/700/900, ma il CSS del progetto usa
   anche 600 e 800 (mai scaricati, il browser li avvicinava al peso più
   vicino disponibile): con un intero asse variabile ogni peso richiesto è
   ora quello vero, non un'approssimazione. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --bg: #f6f6f7;
  --superficie: #ffffff;
  --bordo: #e4e4e6;
  --fg: #353535;
  --fg-attenuato: #6e6e6e; /* derivato da #868686 (reale): quel grigio dà solo 3.6:1 su
    bianco, sotto la soglia AA 4.5:1 — qui la priorità è restare accessibili, non
    essere pixel-identici al sito */

  --primario: #2e5aa8; /* derivato da --accent-dark reale #5991fa, scurito per 6.4:1 su bianco (testo/bottoni) */
  --primario-testo: #ffffff;
  --accento-vivo: #5991fa; /* --accent-dark reale, puro: focus ring, bordi decorativi (non testo piccolo) */
  --corallo: #fc916e; /* --accent-light reale, sempre con testo scuro sopra (5.5:1) */
  --corallo-testo: #353535;

  --errore: #c62828;
  --errore-sfondo: #fdecea;

  --ombra: 0 0.4rem 1rem rgba(0, 0, 0, 0.15); /* formula reale wgilab.eu, non una stima */
  --ombra-soft: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 6px rgba(0, 0, 0, 0.04); /* per elementi piccoli, dove l'ombra piena è troppo pesante */

  --raggio: 16px;
  --raggio-largo: 24px;
  --raggio-pillola: 999px;

  --gradiente-brand: linear-gradient(90deg, #5991fa 1.5%, #fc916e 100%);

  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Chip: un'unica famiglia visiva per ogni "etichetta" del progetto —
   sesso, stato pubblicazione, in giudizio, proprietario, allevamento, punteggio
   massimo, da giudicare. Prima erano stili simili ma leggermente diversi sparsi in
   più file; ora condividono la stessa forma/proporzioni, solo il colore cambia. ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.3;
  padding: 0.25rem 0.7rem;
  border-radius: var(--raggio-pillola);
  white-space: nowrap;
}

.chip--neutro {
  background: var(--bg);
  border: 1px solid var(--bordo);
  color: var(--fg-attenuato);
}

.chip--primario {
  background: var(--primario);
  color: var(--primario-testo);
  border: none;
}

.chip--corallo {
  background: var(--corallo);
  color: var(--corallo-testo);
  border: none;
}

/* Contenuto presente per lettori di schermo/SEO ma non a video — usato dove un'immagine
   (es. il banner ufficiale) porta già lo stesso testo in forma visiva. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}