/**
 * design-system.css — i valori del progetto "Rueda Loca", e nient'altro.
 *
 * Caricato su TUTTO il sito, non solo sulla home nuova. Non dipinge niente:
 * dichiara soltanto variabili CSS, che di per sé non hanno alcun effetto
 * finché qualcuno non le usa. Per questo può stare ovunque senza rischi —
 * una pagina non ancora convertita non se ne accorge.
 *
 * Perché su :root e non su .rl: erano dentro `.rl { }`, cioè valevano solo
 * dentro il body della home. Un secondo template, un header condiviso o un
 * blocco dell'editor non potevano usarle. Ora sono disponibili dappertutto e
 * la conversione delle pagine può procedere una alla volta.
 *
 * Cosa NON sta qui: il colore di fondo, il colore del testo e il carattere
 * della pagina. Quelli restano su `.rl` in home-ruedaloca.css, perché
 * applicarli qui ridipingerebbe di scuro tutto il sito in un colpo solo —
 * che è esattamente ciò che stiamo evitando di fare.
 *
 * I nomi vengono dal mockup "Homepage Ruedaloca v2.dc.html".
 */

:root {
    /* --- fondali ---------------------------------------------------------- */
    --rl-bg:          #140d06;  /* fondo delle sezioni                        */
    --rl-bg-deep:     #0b0704;  /* il più scuro: dietro le immagini           */
    --rl-bg-header:   #0f0a05;  /* testata e piede                            */
    --rl-bg-card:     #1e1409;  /* schede                                     */
    --rl-bg-alt:      #1a1108;  /* sezione alternata                          */

    /* --- linee ------------------------------------------------------------ */
    --rl-border:      #33230f;
    --rl-border-soft: #2a1c0c;
    --rl-line:        #6b5433;  /* bordo dei bottoni fantasma                 */

    /* --- testo ------------------------------------------------------------ */
    --rl-text:    #f7efe2;      /* testo principale su fondo scuro            */
    --rl-text-2:  #e7d9c2;      /* paragrafi lunghi                           */
    --rl-muted:   #bda887;      /* testo secondario                           */
    --rl-muted-2: #a89070;      /* etichette                                  */
    --rl-muted-3: #8a7355;      /* etichette minori                           */

    /* --- accenti ---------------------------------------------------------- */
    --rl-gold:       #f2b23c;   /* accento principale                         */
    --rl-gold-light: #ffd27a;   /* accento su hover, orari                    */
    --rl-red:        #e2452a;   /* azione: il bottone che si vuole cliccato   */
    --rl-red-dark:   #c93a20;
    --rl-red-hover:  #f2542f;

    /* --- caratteri -------------------------------------------------------- */
    /* I file sono ospitati in proprio: vedi assets/fonts/SORGENTE.txt.       */
    --rl-display: 'Archivo Black', Impact, sans-serif;   /* titoli            */
    --rl-cond:    'Barlow Condensed', 'Arial Narrow', sans-serif; /* etichette */
    --rl-body:    Barlow, system-ui, -apple-system, sans-serif;   /* testo    */

    /* --- misure ----------------------------------------------------------- */
    --rl-pad: 40px;   /* respiro orizzontale delle sezioni; 20px su mobile    */
}