/* =========================================================================
   British School of Casale — sistema di base
   Colori, tipografia, spazi. Tutto il resto del tema pesca soltanto da qui:
   se un valore non e' una variabile definita in questo file, e' un errore.
   ========================================================================= */

:root {

	/* --- marchio -------------------------------------------------------
	 * Misurati sui file veri, non scelti a occhio:
	 *   navy e rosso dai pixel di logoscuolamod.png
	 *   rosso-campagna dal fondo piatto delle locandine 2026
	 * Il rosso del logo (#E00007) e quello della campagna (#ED1C24) sono
	 * quasi lo stesso colore: uso quello della campagna, che e' il materiale
	 * stampato di quest'anno, e il logo ci sta accanto senza stonare.
	 */
	--navy:           #003283;
	--navy-scuro:     #001C4B;   /* la fascia profonda, sotto il colore del corso */
	--navy-chiaro:    #17489B;
	--rosso:          #ED1C24;   /* la campagna: campiture e titoli grandi */
	--rosso-scuro:    #C2141B;   /* testo bianco sopra: 6,2:1, passa AA */
	--rosso-cupo:     #9A1015;   /* stato premuto */
	--rosso-chiaro:   #FF5C5C;

	/*
	 * ATTENZIONE al rosso. Bianco su #ED1C24 fa 4,38:1, sotto la soglia AA
	 * di 4,5 per il testo normale. Quindi: il rosso della campagna si usa per
	 * le campiture e per i titoli grandi, mentre TUTTO cio' che porta testo
	 * piccolo — bottoni, pastiglie, contatori — usa --rosso-scuro.
	 */

	/* --- inchiostri e carte --------------------------------------------
	 * I grigi hanno una punta di blu, non sono neutri: accanto al navy del
	 * marchio un grigio puro sembra sporco.
	 */
	--inchiostro:     #14161F;
	--inchiostro-2:   #3A3F52;
	--grigio:         #626878;
	--grigio-chiaro:  #989DAB;
	--carta:          #FFFFFF;
	--carta-calda:    #F6F4F1;
	--carta-fredda:   #F2F4F8;
	--filo:           #E2E0DC;
	--filo-scuro:     #C9C6C0;

	/* --- colori dei corsi ----------------------------------------------
	 * Non decorano: CODIFICANO. Vengono dalle schede che la scuola gia' usa.
	 * Ogni pagina corso imposta --corso e --su-corso, e l'impianto e' lo
	 * stesso per tutti: Kids e Teens sono la STESSA pagina di colore diverso.
	 * --su-corso e' il testo che ci va sopra, scelto per contrasto, e
	 * --corso-tenue e' la versione lavata dello stesso colore: fa da fondo
	 * alla scala Cambridge senza gridare.
	 */
	--kids:           #FFD21E;  --su-kids:  #2B2200;  --kids-tenue:  #FFF8DE;
	--teens:          #93DD26;  --su-teens: #16280B;  --teens-tenue: #F2FBE3;
	--adults:         #AA36CB;  --su-adults:#FFFFFF;  --adults-tenue:#F7E9FC;
	--uno-a-uno:      #00A7D3;  --su-uno:   #02222C;  --uno-tenue:   #E2F6FC;
	--certificazioni: #FF914C;  --su-cert:  #351604;  --cert-tenue:  #FFF0E5;
	--online:         #E30C0A;  --su-online:#FFFFFF;  --online-tenue:#FDECEC;

	/* Valori di partenza. Ogni pagina corso riscrive questi tre e nient'altro:
	 * e' cosi' che Kids e Teens restano LO STESSO impianto, non due design
	 * che si somigliano. */
	--corso:          var(--rosso);
	--su-corso:       #FFFFFF;
	--corso-tenue:    #FDECEC;

	/* --- semantica ------------------------------------------------------ */
	--ok:             #14713F;
	--attenzione:     #9A5B00;
	--errore:         var(--rosso-scuro);

	/* --- caratteri ------------------------------------------------------
	 * La campagna e' composta in un grottesco della famiglia Helvetica.
	 * Parto dalla pila di sistema: su Apple e' esattamente quel carattere,
	 * costa zero richieste e non manda un solo byte a Google — che su un
	 * sito italiano di una scuola non e' un dettaglio.
	 * --carattere-mano serve SOLO al gesto della campagna (la correzione
	 * scritta a mano). Mai per il testo.
	 */
	--carattere:      -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
	--carattere-tit:  var(--carattere);
	--carattere-mano: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;

	/* --- scala tipografica ---------------------------------------------
	 * Base 17px, non 16: la cliente si e' lamentata che «si fa fatica a
	 * leggere». Il corpo del testo e le tabelle partono grandi.
	 */
	--t-base:   1.0625rem;   /* 17px */
	--t-picc:   0.9375rem;   /* 15px */
	--t-mini:   0.8125rem;   /* 13px */
	--t-grande: 1.1875rem;   /* 19px */
	--t-guida:  clamp(1.25rem, 1.6vw, 1.5rem);

	--t-h4: clamp(1.125rem, 1.6vw, 1.3125rem);
	--t-h3: clamp(1.3125rem, 2.1vw, 1.625rem);
	--t-h2: clamp(1.75rem, 3.4vw, 2.625rem);
	--t-h1: clamp(2.125rem, 5vw, 3.5rem);
	--t-hero: clamp(2.5rem, 7vw, 4.75rem);

	--occhiello: 0.78125rem;   /* 12.5px, maiuscoletto spaziato */

	--peso-normale: 400;
	--peso-medio:   500;
	--peso-forte:   700;
	--peso-nero:    800;

	--interlinea:        1.62;
	--interlinea-stretta:1.14;

	/* --- spazi ----------------------------------------------------------
	 * Scala di 4px. I nomi dicono la misura, non l'uso, cosi' non mento
	 * quando riuso uno spazio in un posto diverso.
	 */
	--s1:  0.25rem;  --s2:  0.5rem;   --s3: 0.75rem;  --s4: 1rem;
	--s5:  1.25rem;  --s6:  1.5rem;   --s8: 2rem;     --s10: 2.5rem;
	--s12: 3rem;     --s16: 4rem;     --s20: 5rem;    --s24: 6rem;
	--s32: 8rem;

	/* respiro verticale delle fasce, che si stringe sul telefono */
	--fascia:   clamp(3rem, 7vw, 6rem);
	--fascia-g: clamp(4rem, 9vw, 8rem);

	/* --- misure ---------------------------------------------------------- */
	--largo:      1240px;   /* contenitore massimo */
	--largo-str:  920px;    /* contenuto misto */
	--misura:     68ch;     /* riga di lettura: oltre, l'occhio perde il rigo */
	--bordo:      clamp(1rem, 4vw, 2.5rem);

	/* --- forme ----------------------------------------------------------- */
	--raggio:     4px;
	--raggio-g:   10px;
	--raggio-pil: 999px;

	/* Ombre tenui: servono a staccare, non a fare volume. */
	--ombra-1: 0 1px 2px rgba(20, 22, 31, .07), 0 2px 8px rgba(20, 22, 31, .05);
	--ombra-2: 0 4px 12px rgba(20, 22, 31, .09), 0 12px 32px rgba(20, 22, 31, .07);

	--transizione: 160ms cubic-bezier(.2, 0, .2, 1);
}

/* Chi chiede meno movimento lo ottiene davvero, ovunque nel tema. */
@media (prefers-reduced-motion: reduce) {
	:root { --transizione: 0ms; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   Il colore entra da qui.

   La pagina riceve una classe sul body (`corso-kids`, `corso-teens`, ...) e
   qui vengono riscritte tre variabili. Da quel momento ogni fascia, bottone,
   segno e bordo del tema cambia colore da solo: non c'e' un solo selettore
   duplicato per corso.
   ========================================================================= */

.corso-kids  { --corso: var(--kids);  --su-corso: var(--su-kids);  --corso-tenue: var(--kids-tenue); }
.corso-teens { --corso: var(--teens); --su-corso: var(--su-teens); --corso-tenue: var(--teens-tenue); }
.corso-adults { --corso: var(--adults); --su-corso: var(--su-adults); --corso-tenue: var(--adults-tenue); }
.corso-uno-a-uno { --corso: var(--uno-a-uno); --su-corso: var(--su-uno); --corso-tenue: var(--uno-tenue); }
.corso-certificazioni { --corso: var(--certificazioni); --su-corso: var(--su-cert); --corso-tenue: var(--cert-tenue); }
.corso-online { --corso: var(--online); --su-corso: var(--su-online); --corso-tenue: var(--online-tenue); }

/* Sulle fasce chiare (giallo, verde) i titoli devono essere scuri, non navy
   sbiadito: `--su-corso` porta gia' il contrasto giusto. */
.fascia-corso h1,
.fascia-corso h2,
.fascia-corso h3,
.fascia-corso .titolo-pagina { color: var(--su-corso); }