/* ---------------------------------------------------------------------------------- */
/* 1. VARIABILI CSS (GLOBAL CONFIGURATION) */
/* ---------------------------------------------------------------------------------- */

:root {
    /* =============================================
       1. PALETTE COLORI BASE
    ============================================= */
    
    /* SFONDI (Beige / Terre) */
    --base-beige-chiaro:       #efe9e4;  /* Es: Sfondo Pagina Generale */
    --base-ruggine-scuro:      #A34D00;  /*  --base-beige-medio Es: Sfondo Menu */
    --base-beige-oro:          #EBD8A0;  /* Es: Tiles */
    --base-scuro:              #1f1313;  /* Es: Testo */
    --base-evidenza:           #FFE44D;  /* Es: Testo evdenziato */
    --base-disattivo:          #BC855A;  /* Es: Testo disattivato */
    --base-grigio:             #666;     /* Es: Testo grigio */
    --base-oro-chiaro:         #ceaa55;  /* Es: Testo oro titolo */ 
    --base-oro:                #8E7029;  /* Es: Testo oro */
    
    /* ACCENTI ORO */
    --base-oro-vetro:          rgba(206, 170, 85, 0.3);

    /* ACCENTI ROSSI / MARRONI */
    --base-bianco:             #ffffff;
    --base-ruggine:            #89492b;

    /* NEUTRI */
     --base-bianco-vetro:       rgba(255, 255, 255, 0.5);

    /* =============================================
       2. VARIABILI SEMANTICHE
    ============================================= */

    /* --- LAYOUT GENERALE --- */
    --coloreSfondo:            var(--base-beige-chiaro);
    --coloreSfondoScuro:       var(--base-scuro); /* Header/Footer */

    /* --- TESTI & TITOLI --- */
    --coloreTestoPrimario:     var(--base-scuro);
    --coloreTestoSecondario:   var(--base-grigio);
    --coloreTitoloChiaro:      var(--base-oro-chiaro);
    --coloreTitolo:            var(--base-oro);
    --coloreLink:              var(--base-oro);
    /* --coloreSottotitolo:       var(--base-oro-trasparente); */

    /* --- MENU DI NAVIGAZIONE --- */
    --coloreSfondoMenu:        var(--base-ruggine-scuro);
    --coloreTestoMenu:         var(--base-bianco); 
    --coloreTestoMenuHover:    var(--base-bianco);
    --coloreTestoMenuAttivo:   var(--base-evidenza);
    --coloreTestoMenuDisattivo:var(--base-disattivo);

    /* --- HOME PAGE (Tiles) --- */
    --coloreTiles:             var(--base-beige-oro);
    --coloreTestoTiles:        var(--base-scuro);

    /* --- COMPONENTI UI (Tabs, Modali, Pannelli) --- */
    --sfondoTabNonAttiva:      var(--base-beige-oro);
    --sfondoTabAttiva:         var(--base-bianco);
    --bordoChiaroTrasparente:  var(--base-bianco);
    --sfondoChiaroTrasparente: var(--base-bianco);
    --coloreBordoTab:          var(--base-bianco);
    --coloreButtonMirador:     var(--base-oro);

    /* --- MANOSCRITTI (Pulsanti, Input, Liste JS) --- */
    --coloreCarte:             var(--base-ruggine);
    --coloreOdd:               var(--base-beige-chiaro);
    --sfondoInput:             var(--base-bianco);

    /* Variabili specifiche per gli elementi generati via JS (manoscritti.js) */
    --coloreSfondoListActive:  var(--base-oro-vetro);
    --coloreBordoSeparatore:   var(--base-oro-vetro);

    

}