/* ------------------------------------------------------------------
   Il sito in tre fondi, settembre 2026 (versione A approvata il 23/9).
   Il cliente trovava il sito "troppo nero" e ha chiesto di spezzarlo con
   un crema vicino al legno del locale. I fondi sono presi dal locale:
     nero   #0e0d0d  la notte: testate, serate, programma, piede
     crema  #EFE8DC  le tovaglie: la tavola, le parole, gli eventi privati
     noce   #3B271C  le pareti: le foto degli spazi, prenotare, i biglietti
   I componenti non si toccano: ogni fascia ridefinisce i token --vnl-*
   e le variabili scendono per ereditarieta'.
   Nato per la home, esteso alle pagine interne lo stesso giorno. Restano
   nere le testate, il programma, gli artisti, il negozio e le pagine
   generiche (page.php): li' dentro c'e' contenuto d'archivio coi suoi
   colori, e sul chiaro non e' stato verificato.
   Prototipo: vinile-ds/proposta/crema-varianti.css
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------ crema */

.home .evening,
.home .private,
.vnl-root .manifesto,             /* il locale */
.vnl-root .vintage,               /* il locale, artista */
.vnl-root .numeri,                /* il locale, artista */
.vnl-root .pannello,              /* eventi privati */
.vnl-root .preventivo,            /* eventi privati */
.vnl-root .racconto,              /* ricorrenze */
.vnl-root section.porta {         /* serata: le regole d'ingresso */
  --vnl-surface-0: #EFE8DC;
  --vnl-surface-1: #E6DDCD;
  --vnl-surface-2: #DCD1BE;
  --vnl-text: #1C1712;                        /* 14,6:1 */
  --vnl-text-muted: rgba(28, 23, 18, 0.72);   /*  6,4:1 */
  --vnl-text-faint: rgba(28, 23, 18, 0.68);   /*  5,1:1 anche su surface-2 */
  --vnl-border: rgba(28, 23, 18, 0.16);
  --vnl-border-strong: rgba(28, 23, 18, 0.45);
  /* l'arancio del marchio sul crema si ferma a 3,2:1: da testo serve piu'
     scuro, e #A9360B su surface-2 fa 4,3:1: questo fa 5,0:1 */
  --crema-accent-text: #9A300A;
  --fondo-accent-text: var(--crema-accent-text);
  background: var(--vnl-surface-0);
  color: var(--vnl-text);
}

/* ------------------------------------------------------------- noce */

.home .contact-sheet,
.home .booking,
.vnl-root .spazi,                 /* il locale: il mosaico delle foto */
.vnl-root .dove,                  /* il locale: come si arriva */
.vnl-root .compreso,              /* eventi privati: cosa c'e' gia' */
.vnl-root section.contatti,       /* contatti: tavolo e lista */
.vnl-root .quest-anno,            /* ricorrenze: la data di quest'anno */
.vnl-root .biglietti {            /* serata: i biglietti */
  --vnl-surface-0: #3B271C;
  --vnl-surface-1: #46301F;
  --vnl-surface-2: #523A28;
  --vnl-text: #EFE8DC;                           /* 11,6:1 */
  --vnl-text-muted: rgba(239, 232, 220, 0.74);   /*  7,0:1 */
  --vnl-text-faint: rgba(239, 232, 220, 0.62);   /*  5,4:1 */
  --vnl-border: rgba(239, 232, 220, 0.16);
  --vnl-border-strong: rgba(239, 232, 220, 0.42);
  --noce-accent-text: #FF8A5B;                   /*  6,1:1 */
  --fondo-accent-text: var(--noce-accent-text);
  background: var(--vnl-surface-0);
  color: var(--vnl-text);
}

/* l'alone radiale sul chiaro fa cerchi concentrici visibili, e quello
   freddo sul legno vira al grigio: nelle fasce colorate si spegne */
:is(.home .private, .vnl-root .compreso, .vnl-root .dove, .vnl-root .spazi).glow::after { display: none; }

/* ------------------------------------------------------ home: crema */

.home .evening .moment__time,
.home .evening .timeline__step[data-on="true"] b,
.home .evening .vnl-kicker,
.home .private .vnl-kicker { color: var(--crema-accent-text); }

/* la barra della sera e' agganciata: sul crema deve essere crema */
.home .evening .timeline {
  background: rgba(239, 232, 220, 0.92);
  border-block-end: 1px solid var(--vnl-border);
}
.home .evening .timeline__step { border-inline-end-color: var(--vnl-border); }

.home .evening .vnl-btn--secondary { color: var(--vnl-text); border-color: var(--vnl-border-strong); }
.home .private .vnl-badge { color: var(--vnl-text-muted); }

/* le foto sul crema: niente velo blu freddo sul club */
.home .evening .moment--club { --tint: rgba(120, 70, 40, 0.18); }

/* ------------------------------------------------------- home: noce */

.home .booking .booking__route em,
.home .booking .booking__info dd a:hover { color: var(--noce-accent-text); }
.home .contact-sheet .sheet__frame figcaption {
  background: linear-gradient(to top, rgba(40, 26, 18, 0.92), transparent);
}
/* le foto del provino virano verso il legno */
.home .contact-sheet .sheet__frame img { filter: saturate(0.78) brightness(0.9) sepia(0.14); }

/* il passaggio fra due fasce e' un filo di legno, non un'ombra */
.home .evening, .home .contact-sheet, .home .private, .home .booking {
  border-top: 1px solid rgba(107, 74, 53, 0.35);
}

/* -------------------------------------------------- pagine interne */

/* l'arancio da testo (occhielli, link, cifre) si adatta al fondo;
   i bottoni pieni restano nell'arancio del marchio */
:is(.vnl-root .manifesto, .vnl-root .vintage, .vnl-root .numeri, .vnl-root .pannello,
    .vnl-root .preventivo, .vnl-root .racconto, .vnl-root section.porta,
    .vnl-root .spazi, .vnl-root .dove, .vnl-root .compreso, .vnl-root section.contatti,
    .vnl-root .quest-anno, .vnl-root .biglietti) :is(.vnl-kicker, .wpcf7-form a, .scheda a, .avviso b) {
  color: var(--fondo-accent-text);
}

/* il bottone pieno: sul nero aveva il testo chiaro, sul legno non regge
   (3,2:1). Prende il testo scuro del marchio, come sul crema: 4,7:1 */
.vnl-root :is(.spazi, .dove, .compreso, section.contatti, .quest-anno, .biglietti) a.vnl-btn--primary {
  color: var(--vnl-on-brand);
}

.vnl-root :is(.manifesto, .vintage, .numeri, .pannello, .preventivo, .racconto, section.porta,
              .spazi, .dove, .compreso, section.contatti, .quest-anno, .biglietti) {
  border-top: 1px solid rgba(107, 74, 53, 0.35);
}

/* la barra delle occasioni e' agganciata sopra i pannelli crema */
.vnl-root .occ-bar {
  background: rgba(239, 232, 220, 0.94);
  --vnl-text: #1C1712;
  --vnl-text-muted: rgba(28, 23, 18, 0.72);
  --vnl-text-faint: rgba(28, 23, 18, 0.68);
  --vnl-border: rgba(28, 23, 18, 0.16);
  --vnl-border-strong: rgba(28, 23, 18, 0.45);
  color: var(--vnl-text);
}

/* le foto degli spazi virano verso il legno, come il provino in home */
.vnl-root .spazi .tessera img { filter: saturate(0.82) brightness(0.92) sepia(0.12); }

/* i numeri stanno sotto il vintage, sullo stesso crema: e' un blocco solo */
.vnl-root .vintage + .numeri { border-top: 0; }