/*
 * Innovando Editorial Framework — skin.css
 *
 * QUESTO FILE E' L'ASPETTO PREDEFINITO, NON LA STRUTTURA.
 *
 * frontend.css non dichiara piu' nessun valore estetico: legge dei token e
 * porta con se', come fallback, il valore che aveva prima. Questo foglio
 * dichiara quei token, cioe' la pelle con cui il Framework si presenta quando
 * nessuno gliene da' un'altra.
 *
 * Un tema che vuole vestire il Framework da solo dichiara, nel suo
 * functions.php:
 *
 *     add_theme_support( 'ief-skin' );
 *
 * A quel punto questo file non viene nemmeno caricato e la palette e' del
 * tema. Senza quella dichiarazione, il file si carica e il Framework si vede
 * esattamente come si e' sempre visto.
 *
 * REGOLA PER CHI MODIFICA: qui dentro si dichiarano valori, non si scrivono
 * selettori. Una regola con un selettore, in questo file, e' un errore: vuol
 * dire che quella cosa e' struttura e va in frontend.css.
 */

:root {
    /* ------------------------------------------------------- il colore
     *
     * I token che finiscono in `-rgb` contengono TRE NUMERI SEPARATI DA SPAZI,
     * non un colore: servono a costruire le trasparenze con
     * `rgb(var(--token) / 0.2)`. Scriverci dentro un esadecimale rompe ogni
     * trasparenza che li usa. */

    --ief-accent: #da291c;
    --ief-accent-rgb: 218 41 28;
    --ief-accent-soft: rgb(var(--ief-accent-rgb) / 0.1);

    --ief-ink: #171717;
    --ief-ink-rgb: 21 21 21;
    --ief-paper: #ffffff;
    --ief-paper-rgb: 255 255 255;
    --ief-muted: #626262;

    --ief-neutral-rgb: 188 188 188;
    --ief-shadow-rgb: 0 0 0;

    --ief-border: rgb(var(--ief-shadow-rgb) / 0.12);
    --ief-panel: rgb(var(--ief-shadow-rgb) / 0.035);
    --ief-panel-strong: rgb(var(--ief-shadow-rgb) / 0.065);

    /* ------------------------------------------------------ le forme */

    --ief-radius: 18px;
    --ief-radius-small: 9px;
    --ief-card-radius: 12px;
    --ief-card-padding: 32px;
    --ief-card-shadow: 0 10px 28px rgb(var(--ief-shadow-rgb) / 0.055);
    --ief-card-shadow-hover: 0 16px 38px rgb(var(--ief-shadow-rgb) / 0.085);

    /* ------------------------------------------------------ le misure
     *
     * `--ief-layout-width` NON si dichiara qui. E' la larghezza
     * dell'impianto editoriale e appartiene al tema: dichiararla anche qui
     * creerebbe una gara nella cascata fra due fogli che dicono la stessa
     * cosa. Senza dichiarazione vale il fallback scritto in frontend.css,
     * che e' la misura storica. */

    --ief-container: 1120px;
    --ief-readable: 760px;
    --ief-gap: clamp(18px, 2.4vw, 34px);
    --ief-section-space: clamp(42px, 6vw, 84px);
}