/* ============================================================
   SITI STUDIO LAB — temi
   ------------------------------------------------------------
   Il contratto e' questo, e non cambia mai:

     --primario      colore delle azioni e degli accenti
     --primario-cs   la sua versione scura, per gli stati premuti
     --su-primario   testo leggibile SOPRA il primario
     --fondo         fondo della pagina
     --superficie    fondo delle schede sopra il fondo
     --testo         testo principale
     --testo-tenue   testo secondario
     --bordo         righe e contorni

   Aggiungere una palette = aggiungere un blocco di otto valori qui
   sotto. Nessun'altra riga di codice, da nessun'altra parte.

   Gli stili (font e raggio) sono un asse separato: si combinano
   liberamente con le palette. Tre stili x quattro palette = dodici
   aspetti diversi, da sette blocchi di variabili.
   ============================================================ */

/* ---- PALETTE ---- */

[data-palette="terra"] {
  --primario:    #9c4a2f;
  --primario-cs: #7c3722;
  --su-primario: #fdf7f2;
  --fondo:       #fbf6f0;
  --superficie:  #ffffff;
  --testo:       #2a1d16;
  --testo-tenue: #7a6455;
  --bordo:       #e8dccf;
}

[data-palette="bosco"] {
  --primario:    #2f6b4a;
  --primario-cs: #235037;
  --su-primario: #f4faf6;
  --fondo:       #f6faf6;
  --superficie:  #ffffff;
  --testo:       #17241c;
  --testo-tenue: #5c7266;
  --bordo:       #d9e6dd;
}

[data-palette="notte"] {
  --primario:    #c9a961;
  --primario-cs: #b08f47;
  --su-primario: #1a1712;
  --fondo:       #14130f;
  --superficie:  #1e1c17;
  --testo:       #f2ede3;
  --testo-tenue: #a89e8c;
  --bordo:       #322e26;
}

[data-palette="mare"] {
  --primario:    #1f5f8b;
  --primario-cs: #16465f;
  --su-primario: #f2f8fc;
  --fondo:       #f5f9fc;
  --superficie:  #ffffff;
  --testo:       #12222e;
  --testo-tenue: #5a7080;
  --bordo:       #d7e4ed;
}

/* ---- STILI (carattere + rotondita') ----
   I font sono quelli gia' ospitati in /fonts/: nessuna richiesta esterna,
   nessun file nuovo da scaricare. */

[data-stile="moderno"] {
  --font-titolo: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-corpo:  'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --raggio:      14px;
  --raggio-p:    999px;
  --peso-titolo: 700;
  --spazia-tit:  -.025em;
  --maiuscolo:   none;
}

[data-stile="elegante"] {
  --font-titolo: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-corpo:  'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --raggio:      4px;
  --raggio-p:    4px;
  --peso-titolo: 700;
  --spazia-tit:  -.01em;
  --maiuscolo:   none;
}

[data-stile="essenziale"] {
  --font-titolo: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-corpo:  'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --raggio:      0px;
  --raggio-p:    0px;
  --peso-titolo: 500;
  --spazia-tit:  .02em;
  --maiuscolo:   uppercase;
}

/* ============================================================
   DIREZIONE ARTISTICA — il livello che mancava
   ------------------------------------------------------------
   Palette e stile cambiano colori e caratteri. Non bastano: due
   settori con palette diverse restano lo stesso sito ricolorato.

   Qui si decide la COMPOSIZIONE: quanto respira una sezione, se i
   blocchi hanno il bordo o solo un filetto, quanto è contrastata la
   scala tipografica. È la differenza fra un template e un progetto.

   Si applica con data-arte sul documento, insieme a data-palette e
   data-stile: i tre assi sono indipendenti e si combinano.
   ============================================================ */

/* Ampio: molta aria, titoli grandi, pochi bordi. Ristoranti, studi. */
[data-arte="ampio"] {
  --sez-y:        clamp(56px, 9vw, 128px);
  --sez-y-corta:  clamp(40px, 6vw, 80px);
  --titolo-xl:    clamp(2.4rem, 6.5vw, 4.6rem);
  --titolo-l:     clamp(1.6rem, 3.6vw, 2.6rem);
  --etichetta:    .68rem;
  --spazio-eti:   .2em;
  --bordo-blocco: 0px;
  --filetto:      1px;
}

/* Serrato: densità alta, contrasto forte, blocchi pieni. Barbieri, palestre. */
[data-arte="serrato"] {
  --sez-y:        clamp(40px, 6vw, 88px);
  --sez-y-corta:  clamp(28px, 4vw, 56px);
  --titolo-xl:    clamp(2.2rem, 7vw, 5rem);
  --titolo-l:     clamp(1.5rem, 3.4vw, 2.3rem);
  --etichetta:    .62rem;
  --spazio-eti:   .28em;
  --bordo-blocco: 0px;
  --filetto:      2px;
}

/* Medio: la via di mezzo, con i bordi. Negozi, artigiani. */
[data-arte="medio"] {
  --sez-y:        clamp(46px, 7vw, 100px);
  --sez-y-corta:  clamp(32px, 5vw, 64px);
  --titolo-xl:    clamp(2.2rem, 5.6vw, 3.8rem);
  --titolo-l:     clamp(1.5rem, 3.2vw, 2.2rem);
  --etichetta:    .66rem;
  --spazio-eti:   .18em;
  --bordo-blocco: 1px;
  --filetto:      1px;
}