/*
 * I token: i valori da cui dipende tutto il resto.
 *
 * Questo e il file da toccare quando si cambia l'aspetto del giornale. Ogni
 * valore ha un nome che dice a cosa serve, non che colore e: `--in-testo` e
 * `--in-testo-tenue`, non `--grigio-scuro`. Il giorno che il grigio diventa
 * blu, il nome resta vero.
 *
 * MODALITA CHIARA SOLTANTO, PER ORA. La modalita scura si accende cambiando
 * `color-scheme` in `light dark` e aggiungendo i valori scuri qui sotto: e una
 * decisione da prendere guardando, non da dare per scontata. Finche non la si
 * prende, dichiarare `light` e onesto e impedisce al browser di scurire da
 * solo i controlli dei moduli.
 */

:root {
    color-scheme: light;

    /* ---------------------------------------------------------- il colore */

    /* Il rosso della testata. Preso dal logo, non scelto: e il colore del
     * cerchio dentro la O, ed era gia la variabile primaria di Flatsome. */
    --in-marchio: #700000;
    --in-marchio-vivo: #8c1111;

    /* I neutri sono leggermente caldi, non grigi puri: accanto a un rosso
     * profondo un grigio freddo litiga, un grigio caldo accompagna. */
    --in-fondo: #ffffff;
    --in-fondo-tenue: #f7f5f3;
    --in-fondo-forte: #16130f;

    --in-testo: #16130f;
    --in-testo-tenue: #5b544c;
    --in-testo-inverso: #f7f5f3;

    --in-bordo: #e3ded7;
    --in-bordo-forte: #cec7bd;

    /* La banda di servizio in cima (dalla 0.24.0). Un avorio piu' caldo del
     * fondo tenue: sopra una testata bianca deve leggersi come una riga a se'. */
    --in-fondo-servizio: #f3efe7;
    --in-bordo-servizio: #e2dccf;

    /* Il motto della testata: un tono sotto il testo, perche' accompagna il
     * marchio e non gli fa concorrenza. */
    --in-testo-motto: #3a3530;

    /* Il colore del fuoco della tastiera. Deve vedersi su tutto, quindi non e
     * il rosso della testata: sul rosso stesso sparirebbe. */
    --in-fuoco: #0b57d0;

    /* ------------------------------------------------------- i caratteri */

    /* Le riserve non sono un ripiego: sono cio che il lettore vede nei primi
     * millisecondi, e per molti lettori con connessione lenta e cio che vede
     * e basta. Vanno scelte, non copiate a caso. */
    --in-titoli: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --in-corpo: "Merriweather", Charter, Georgia, "Times New Roman", serif;
    --in-interfaccia: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* --------------------------------------------------------- le misure */

    /* La scala e fluida ma limitata: il massimo non supera mai due volte e
     * mezzo il minimo, altrimenti chi ingrandisce il testo dal sistema
     * operativo si ritrova con proporzioni impazzite. */
    --in-t-micro: 0.75rem;
    --in-t-piccolo: 0.875rem;
    --in-t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --in-t-medio: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
    --in-t-grande: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
    --in-t-enorme: clamp(2rem, 1.6rem + 2vw, 3.5rem);

    --in-riga-stretta: 1.15;
    --in-riga-media: 1.4;
    --in-riga-larga: 1.7;

    /* La lunghezza di riga per la lettura lunga. Sotto le 55 battute si legge
     * a scatti, sopra le 75 si perde il ritorno a capo. */
    --in-misura: 68ch;

    /* -------------------------------------------------------- lo spazio */

    --in-s1: 0.25rem;
    --in-s2: 0.5rem;
    --in-s3: 0.75rem;
    --in-s4: 1rem;
    --in-s5: 1.5rem;
    --in-s6: 2rem;
    --in-s7: 3rem;
    --in-s8: 4.5rem;
    --in-s9: 7rem;

    /* --------------------------------------------------------- la forma */

    /* ANGOLI VIVI, OVUNQUE.
     *
     * Erano tre e sei pixel: abbastanza da addolcire, abbastanza da far
     * sembrare il giornale un pannello di controllo. Lo spigolo dice carta
     * stampata dove il raggio dice interfaccia, e su una testata registrata
     * la differenza si sente.
     *
     * I token restano — non sono stati cancellati — perche' il giorno in cui
     * si volesse tornare indietro si cambia qui e si muove tutto insieme. */
    --in-raggio: 0;
    --in-raggio-grande: 0;

    /* --------------------------------- i raggi che il tema detta a IEF
     *
     * IEF legge questi token e li applica alle sue card, ai suoi archivi,
     * all'indice, al ritratto dell'autore, alla copertina dell'articolo e
     * alla miniatura del ticker. Senza queste cinque righe il framework
     * userebbe i suoi valori storici — fino a ventotto pixel negli archivi —
     * e il sito avrebbe la home a spigolo vivo e le categorie arrotondate.
     *
     * E' il contratto dei token che lavora: noi dichiariamo, il framework
     * legge. Le pillole e i cerchi di IEF restano tondi, e devono restarlo:
     * non sono raggi, sono forme. */
    --ief-card-radius: 0;
    --ief-media-radius: 0;
    --ief-radius: 0;
    --ief-radius-small: 0;
    --ief-banner-card-radius: 0;

    --in-larghezza-contenuto: 44rem;
    --in-larghezza-larga: 68rem;
    --in-larghezza-piena: 90rem;

    /* La larghezza dell'impianto editoriale di IEF.
     *
     * DALLA 0.2.0 QUESTA MISURA E' NOSTRA. Prima era una misura di IEF che noi
     * dovevamo indovinare: il framework la scriveva a mano, 1320px, in undici
     * punti del suo foglio di stile, e noi la ricopiavamo qui sperando di non
     * sbagliare. Con il contratto dei token (IEF 3.0.0-alpha.6) il rapporto si
     * e' invertito: il framework legge `--ief-layout-width` e noi gliela
     * dichiariamo. Se cambia questo numero, si muovono insieme il contenitore
     * dell'articolo, l'indice, l'intestazione e i moduli di fondo.
     *
     * Il nome italiano e' il nostro; quello inglese e' il contratto pubblico
     * del framework. Sono la stessa misura detta nelle due lingue. */
    --in-larghezza-impianto: 1320px;
    --ief-layout-width: var(--in-larghezza-impianto);

    /* Il carattere dei titoli editoriali costruiti da IEF: senza questa riga
     * il framework eredita e basta, con questa segue la testata. */
    --ief-font-heading: var(--in-titoli);

    /* ---------------------- i documenti di consultazione, dalla 0.16.0
     *
     * Le pagine istituzionali — legali, trasparenza, identita' — non sono
     * articoli e non si leggono come articoli. IEF le costruisce con un impianto
     * suo e chiede a noi tre cose: con che carattere si legge il corpo, di che
     * colore e' la fascia della testatina, quale rosso usa il distintivo.
     *
     * IL CORPO VA IN INTER, ED E' UNA DECISIONE, NON UN RIPIEGO. Un racconto si
     * legge in un carattere con le grazie, un documento di riferimento si legge
     * in un bastone: e' la convenzione della documentazione seria ed e' il
     * segnale piu' forte che distingue una pagina legale da un articolo. I
     * titoli restano Newsreader, perche' la testata resta la stessa. */
    --ief-font-reference: var(--in-interfaccia);
    --ief-reference-surface: var(--in-fondo-tenue);
    --ief-reference-accent: var(--in-marchio);

    --in-margine-laterale: clamp(1rem, 4vw, 3rem);

    /* ------------------------------------------------ i colori del piede
     *
     * IL PIEDE STA SU FONDO SCURO, E I COLORI DEL GIORNO NON CI ARRIVANO.
     *
     * Il rosso della testata su fondo chiaro ha un rapporto di contrasto di
     * dodici a uno; lo stesso rosso sul nero caldo del piede scende a meno
     * di due, cioe' si vede una macchia e non si legge una parola. Non e'
     * un'impressione: e' aritmetica, e per questo il piede ha un rosso suo,
     * schiarito quel tanto che basta a stare sopra il quattro e mezzo che
     * serve a un testo piccolo.
     *
     * Stessa ragione per i grigi: un secondario che su carta bianca sarebbe
     * elegante, sul nero diventa fumo. */
    --in-piede-fondo: var(--in-fondo-forte);
    --in-piede-fascia: #211c17;
    --in-piede-testo: var(--in-testo-inverso);
    /* Un tono piu' chiaro dalla 0.29.1: su macOS il testo chiaro e piccolo
     * su fondo scuro si impasta, e serve piu' contrasto per restare netto. */
    --in-piede-tenue: #dad3c9;
    --in-piede-accento: #e8664e;
    --in-piede-riga: #3a332c;
}