/**
 * tokens.css — custom property del tema ItalyNews Child.
 *
 * Unico posto in cui possono comparire valori letterali di colore, misura e
 * tipografia. home.css legge solo da qui, con var().
 */

:root {

	/* ------------------------------------------------------------------
	 * Tipografia
	 *
	 * Coppia: Source Serif 4 per i titoli, Inter per firme, occhielli e
	 * metadati. I file .woff2 vanno in assets/fonts/ — vedi il README.
	 * Finché non ci sono, valgono i fallback di sistema.
	 * ---------------------------------------------------------------- */
	--iny-font-titoli: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
	--iny-font-testo: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	/* Scala tipografica, passo 1.25 su base 16px. */
	--iny-fs-xs: 0.75rem;   /* 12px — occhielli, metadati */
	--iny-fs-sm: 0.875rem;  /* 14px — firme, didascalie */
	--iny-fs-base: 1rem;    /* 16px — corpo */
	--iny-fs-md: 1.25rem;   /* 20px — titoli card */
	--iny-fs-lg: 1.5rem;    /* 24px — titoli sezione */
	--iny-fs-xl: 2rem;      /* 32px — titoli maggiori */
	--iny-fs-2xl: 2.75rem;  /* 44px — titolo dell'apertura */

	/* Titolo dell'apertura: fluido, così non serve una media query dedicata. */
	--iny-fs-apertura: clamp(1.75rem, 1.1rem + 2.8vw, 2.75rem);
	--iny-fs-sezione: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);

	--iny-lh-stretta: 1.15; /* titoli */
	--iny-lh-media: 1.3;    /* titoli piccoli */
	--iny-lh-normale: 1.5;  /* corpo */

	--iny-fw-normale: 400;
	--iny-fw-medio: 600;
	--iny-fw-grassetto: 700;

	--iny-ls-stretta: -0.015em; /* i titoli serif reggono un filo di negativo */
	--iny-ls-larga: 0.06em;     /* occhielli e etichette in maiuscoletto */

	/* ------------------------------------------------------------------
	 * Spaziature — scala su base 4px
	 * ---------------------------------------------------------------- */
	--iny-sp-1: 0.25rem;  /* 4px */
	--iny-sp-2: 0.5rem;   /* 8px */
	--iny-sp-3: 0.75rem;  /* 12px */
	--iny-sp-4: 1rem;     /* 16px */
	--iny-sp-5: 1.5rem;   /* 24px */
	--iny-sp-6: 2rem;     /* 32px */
	--iny-sp-7: 3rem;     /* 48px */
	--iny-sp-8: 4rem;     /* 64px */

	/* ------------------------------------------------------------------
	 * Larghezze, bordi, proporzioni
	 * ---------------------------------------------------------------- */
	--iny-larghezza-contenuto: 1200px;
	--iny-larghezza-testo: 68ch;
	/*
	 * Larghezza minima di una card prima che la griglia vada a capo.
	 * 22rem è scelto perché faccia tornare i conti con blocchi da 6 card:
	 * 3 colonne su tutta la larghezza (1245px), 2 nella colonna principale
	 * accanto alla spalla (783px). Abbassandolo le righe tornano spaiate.
	 */
	--iny-card-min: 22rem;
	--iny-mini-larghezza: 6rem; /* miniatura della colonna */
	--iny-ritratto: 4.5rem;     /* ritratto dell'autore nel blocco Opinioni */

	--iny-filetto: 3px;         /* spessore del filetto di sezione */
	--iny-bordo: 1px;
	--iny-raggio: 0;            /* il layout è da quotidiano: angoli vivi */
	--iny-focus-spessore: 2px;
	--iny-focus-stacco: 2px;

	--iny-ratio-apertura: 16 / 9;
	--iny-ratio-card: 3 / 2;

	--iny-transizione: 120ms ease-out;

	/* ------------------------------------------------------------------
	 * TODO PALETTE
	 * ------------------------------------------------------------------
	 * ATTENZIONE: i colori qui sotto sono SEGNAPOSTO, non la palette del
	 * brand, che non è ancora stata decisa. Sono una scala di grigi neutra
	 * più un solo accento, scelti per garantire un contrasto >= 4.5:1 su
	 * fondo chiaro e permettere di lavorare sul layout.
	 *
	 * Quando la palette arriva: si cambiano SOLO questi valori, nient'altro
	 * nel tema. Se trovi un colore letterale fuori da questo blocco, è un bug.
	 *
	 * Contrasti verificati su fondo bianco:
	 *   testo   #1c1917  17.4:1     meta    #78716c   4.8:1
	 *   tenue   #44403c  10.8:1     accento #8c1c13   9.2:1
	 * ---------------------------------------------------------------- */

	/* Scala di grigi */
	--iny-grigio-0: #ffffff;
	--iny-grigio-100: #f5f5f4;
	--iny-grigio-200: #e7e5e4;
	--iny-grigio-300: #d6d3d1;
	--iny-grigio-500: #78716c;
	--iny-grigio-700: #44403c;
	--iny-grigio-900: #1c1917;

	/* Accento unico (segnaposto) */
	--iny-accento: #8c1c13;
	--iny-accento-scuro: #6d150e;

	/* Ruoli semantici: i widget usano questi, mai i grigi diretti. */
	--iny-c-fondo: var(--iny-grigio-0);
	--iny-c-fondo-tenue: var(--iny-grigio-100);
	--iny-c-testo: var(--iny-grigio-900);
	--iny-c-testo-tenue: var(--iny-grigio-700);
	--iny-c-meta: var(--iny-grigio-500);
	--iny-c-bordo: var(--iny-grigio-200);
	--iny-c-bordo-forte: var(--iny-grigio-300);
	--iny-c-filetto: var(--iny-accento);
	--iny-c-link: var(--iny-grigio-900);
	--iny-c-link-hover: var(--iny-accento);
	--iny-c-focus: var(--iny-accento-scuro);
	--iny-c-badge-fondo: var(--iny-accento);
	--iny-c-badge-testo: var(--iny-grigio-0);
	--iny-c-placeholder: var(--iny-grigio-200); /* fondo dove manca l'immagine */

	/*
	 * Velo sotto i titoli sovrapposti alle foto. Deve restare abbastanza denso
	 * da tenere il bianco leggibile anche su un'immagine chiara: con questa
	 * opacità il contrasto del testo non scende sotto 4.5:1 nemmeno nel caso
	 * peggiore, cioè foto completamente bianca.
	 */
	--iny-c-velo: rgba(28, 25, 23, 0.88);
	--iny-c-velo-testo: var(--iny-grigio-0);

	/* Ombra del pannello del menu su schermi piccoli. */
	--iny-c-ombra: rgba(28, 25, 23, 0.18);
}