/* ==========================================================================
   Roma Nuoto Master · la veste «L'Onda Viola»
   Fonti: MARCHIO.md (approvato dal titolare il 3/10/2026; «i colori ok» dalla
   squadra l'8/10) e LAVORO/CREATIVE-SPEC.md (colori derivati).

   È l'UNICO file degli stili comuni (ARCHITETTURA §2.3): lo usano il sito,
   l'area personale e il gestionale. Qui stanno solo:
   - i caratteri, ospitati da noi (nessuna richiesta a server di terzi);
   - colori, caratteri e misure come variabili CSS;
   - pochi pezzi comuni: testo di base, titoli, occhiello, tasti.
   Tutto il resto ha il prefisso della sua sezione (.sito-…, .area-…, .conti-…).

   I caratteri si cercano in /font/ (la cartella sito/font/ del progetto,
   copiata dalla costruzione). Licenze: vendor/LEGGIMI.md.
   ========================================================================== */

/* ---------- caratteri (woff2, solo latino: copre l'italiano, «», €, –) ---------- */
@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/font/barlow-condensed-latin-800-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/font/barlow-condensed-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900; /* carattere variabile: un file per tutti i pesi */
  font-display: swap;
  src: url("/font/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/font/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  /* ---------- colori del marchio (MARCHIO.md) ---------- */
  --viola: #5B277F;          /* viola squadra: titoli, tasti secondari, marchio */
  --arancio: #E97E0D;        /* solo tasto principale, medaglie, richiami; sopra testo scuro, mai bianco */
  --notte: #140A24;          /* fondi scuri, copertine */
  --luce: #B38AF0;           /* accenti sul fondo scuro */
  --lilla: #F6F1FC;          /* fondi chiari, riquadri */
  --acqua: #20C6CC;          /* solo per le acque libere */
  --inchiostro: #1C1326;     /* testo */
  --testo-2: #5E5470;        /* didascalie (contrasto 6,35 su lilla) */
  --filetto: #E2D6F1;        /* righe e bordi */
  --si: #1C7A3A;             /* stato «sì», testo bianco sopra */
  --in-parte: #A2560A;       /* stato «in parte», testo bianco sopra */
  --no: #C93A3A;             /* stato «no», testo bianco sopra */

  /* ---------- colori derivati (CREATIVE-SPEC.md §4) ---------- */
  --profondo: #2A1045;       /* superfici scure */
  --viola-2: #7A3FA8;        /* viola al passaggio del dito o del mouse */
  --arancio-luce: #FF9F3D;   /* arancio sul fondo scuro, contorno del fuoco */
  --lilla-2: #EDE3F8;        /* riquadri dentro il lilla */
  --mare: #0B4F5C;           /* mare profondo, sotto-marchio acque libere */
  --oro: #F2C14E;
  --argento: #C9CED6;
  --bronzo: #D08B55;
  --bianco: #FFFFFF;

  /* ---------- caratteri ---------- */
  --f-titoli: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif; /* 800 corsivo maiuscolo */
  --f-testo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;            /* 400-700 */
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;                            /* sigle e dati tecnici */

  /* ---------- misure ---------- */
  --r: 18px;                 /* raggio dei riquadri */
  --r-s: 12px;               /* raggio dei riquadri piccoli */
  --tocco: 44px;             /* misura minima di un tasto da toccare col dito */
  --margine: 20px;           /* margine laterale sul telefono (36px dal tablet in su) */
  --larghezza: 1180px;       /* larghezza massima del contenuto */
  --barra: 64px;             /* altezza della testata (72px dal tablet in su) */
  --ombra: 0 18px 50px -20px rgba(40, 10, 70, .45);
  --uscita: cubic-bezier(.16, 1, .3, 1); /* movimento «bracciata forte» */
}
@media (min-width: 720px) {
  :root { --margine: 36px; --barra: 72px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-testo);
  font-size: 16px;
  line-height: 1.55;
  color: var(--inchiostro);
  background: var(--lilla);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
[hidden] { display: none !important; } /* «hidden» vince sempre, anche sulle classi che mettono display */
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--arancio-luce); outline-offset: 3px; border-radius: 6px; }

/* salta al contenuto (tastiera e lettori di schermo) */
.salta {
  position: absolute; left: 12px; top: -80px; z-index: 300;
  background: var(--arancio); color: var(--notte); padding: 12px 16px; border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.salta:focus { top: 12px; }

/* testo solo per i lettori di schermo */
.sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ---------- titoli: Barlow Condensed 800 corsivo maiuscolo ---------- */
.display {
  font-family: var(--f-titoli);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .92;
  margin: 0;
  overflow-wrap: break-word;
}
.occhiello {
  font-family: var(--f-titoli);
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 14px;
  line-height: 1.2;
  color: var(--viola);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 12px;
}
.occhiello::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: currentColor; flex: none; }

/* ---------- tasti ---------- */
.tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: 999px; border: 0;
  font-family: var(--f-titoli); font-weight: 800; font-style: italic; text-transform: uppercase;
  font-size: 19px; line-height: 1.05; letter-spacing: .03em; text-decoration: none; text-align: center;
  transition: transform .25s var(--uscita), box-shadow .25s var(--uscita), background-color .2s;
}
.tasto:active { transform: scale(.97); }
.tasto svg { flex: none; }
/* il tasto principale: arancio con testo scuro (mai bianco: contrasto) */
.tasto-fuoco { background: var(--arancio); color: var(--notte); box-shadow: 0 10px 30px -8px rgba(233, 126, 13, .7); }
.tasto-fuoco:hover { background: var(--arancio-luce); }
.tasto-vetro {
  background: rgba(255, 255, 255, .1); color: var(--bianco); border: 1.5px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tasto-vetro:hover { background: rgba(255, 255, 255, .2); }
.tasto-viola { background: var(--viola); color: var(--bianco); }
.tasto-viola:hover { background: var(--viola-2); }
.tasto-bordo { background: transparent; color: var(--viola); border: 2px solid var(--viola); }
.tasto-largo { width: 100%; }

/* ---------- movimento ridotto: tutto fermo ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}