/*
Theme Name: Ledea Theme
Author: Stefano Benanti
Description: Tema di default per Ledea.it
Version: 2.0.9
Requires at least: 6.4.2
Tested up to: 6.4.2
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ledea-theme
Domain Path: /languages
*/

/* La palette, i ruoli Bootstrap e gli stati dei bottoni non stanno piu' qui:
   arrivano dal Ledea Design System, vendorizzato in assets/css/ledea-ds/ e
   caricato prima di questo file dalla catena di enqueue in functions.php.
   Vedi assets/css/ledea-ds/README.md per cosa e' incluso e cosa no.

   Gli override .btn-* che stavano qui coprivano bg/hover/active ma non
   --bs-btn-disabled-*, e non esisteva alcun blocco .btn-outline-*: sono le due
   lacune per cui ogni bottone disabilitato tornava blu Bootstrap e i 69
   "Annulla" dei modali restavano grigio freddo. Le chiude il bridge. */

/* Checkbox, radio, switch e slider non stanno piu' qui: dall'export 2026-08 li
   copre il bridge, su --control-accent, insieme a .form-switch e .form-range che
   l'override locale non toccava. Toglierlo era obbligatorio, non una pulizia:
   forzava coral-600 con !important e style.css carica DOPO il bridge, quindi
   avrebbe tenuto i toggle corallo su un'interfaccia ormai teal. */

.navbar {
    margin-bottom: 20px;
  }  

/* Le due fasce scure del sito — la barra in cima e quella in fondo — sono lo stesso
   verde, su tutte le pagine. Il valore arriva dalla rampa (--teal-900), non e'
   scritto a mano, e le rampe non commutano con prefers-color-scheme: restano verdi
   in entrambi i temi di sistema.

   La navbar ci e' arrivata dopo: fino alla 2.0.0-beta.11 usava .bg-dark di
   Bootstrap, cioe' --gray-900 (#2C2C2A), mentre il footer era gia' --teal-900
   (#04342C). I due misurano 1,02:1 fra loro, quindi lo stacco non era di chiarezza
   ma di TINTA — un grigio neutro-caldo in cima e un verde in fondo alla stessa
   pagina. Si notava ovunque, e in modo netto dove la barra tocca una superficie
   verde piena, come nel varco di accesso del plugin.

   .va-navbar-dark e' una classe del tema, non l'utility di Bootstrap: quella
   porta un !important e avrebbe costretto a rincorrerla. Da non confondere con
   .navbar-dark di Bootstrap, che resta nel markup e non e' un colore di fondo ma
   la variante di navbar a testo chiaro. */
.va-navbar-dark {
    background-color: var(--teal-900);
}

.footer-dark {
    background-color: var(--teal-900);
    color: rgb(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------------------------
   La piattaforma e' SOLO CHIARA: si neutralizza il tema scuro del design system
   ---------------------------------------------------------------------------
   tokens/colors.css chiude con un blocco @media (prefers-color-scheme: dark) che
   ridefinisce dieci alias semantici — --page, --page-alt, --nav-bg, --heading,
   --body-text, --muted-text, --faint-text, --ink, --avoid-text, --good-text — su
   valori scuri (--page-alt diventa #2A211D, un marrone quasi nero, e --body-text
   diventa #E4DCD3, quasi bianco).

   Su questo sito e' sbagliato, e non e' una novita': l'avevamo gia' scritto in
   assets/css/ledea-ds/README.md, spiegando perche' tokens/base.css NON e' stato
   adottato — «la piattaforma e' solo chiara». Quella decisione pero' era stata
   applicata a meta': si e' escluso base.css, ma il blocco dark dentro colors.css
   e' rimasto, e nessuno se n'era accorto perche' fino alla 2.0.1 quei dieci alias
   non li leggeva quasi nessuno. Le pagine dell'interfaccia paziente li usano in
   una cinquantina di punti, e su un computer con il sistema in tema scuro
   uscivano superfici marroni al posto della carta e testo chiaro su fondo chiaro.

   Un difetto c'era gia' e passava inosservato: .va-button-white-grey qui sotto
   scrive color: var(--ink) su background-color: var(--paper). In tema scuro
   diventa #E4DCD3 su #FBF8F3, cioe' etichetta invisibile — ed era la classe delle
   quattro tessere della bacheca del paziente.

   La correzione NON puo' stare nel design system vendorizzato, che e' una copia
   non modificata: una modifica li' verrebbe persa alla prossima sincronizzazione.
   Sta qui, che carica dopo, e si limita a ridichiarare i valori chiari dentro la
   stessa media query — non tocca le rampe, rimette solo gli alias dove stanno
   fuori dalla media query.

   Otto dei dieci sono alias di rampa e si riscrivono come tali. Gli altri due,
   --ink e --nav-bg, nel design system sono LETTERALI e non hanno un token dietro:
   qui vanno quindi ricopiati alla lettera, ed e' l'unico posto del tema dove un
   esadecimale e' scritto a mano. Non e' un colore nuovo — e' lo stesso valore che
   colors.css dichiara dieci righe piu' su — ma va guardato se un export futuro lo
   cambia, perche' qui non se ne accorgerebbe nessuno.

   La strada definitiva e' un export senza quel blocco: vedi docs/punti-aperti.md
   §17. */
@media (prefers-color-scheme: dark) {
  :root {
    --page: var(--paper);
    --page-alt: var(--paper-alt);
    --nav-bg: rgba(251, 248, 243, 0.92);
    --heading: var(--teal-900);
    --body-text: var(--gray-800);
    --muted-text: var(--gray-600);
    --faint-text: var(--gray-400);
    --ink: #2C2320;
    --avoid-text: var(--coral-600);
    --good-text: var(--teal-800);
  }
}

/* ---------------------------------------------------------------------------
   Il chip dell'utente in navbar
   ---------------------------------------------------------------------------
   Dal bundle «Redesign interfaccia paziente Ledea» di Claude Design. Sta in
   header.php, quindi lo vedono anche i professionisti: e' una eccezione decisa
   al vincolo del redesign — le loro pagine non dovevano cambiare finche' non
   tocca a loro — e non una svista.

   Al posto di i.va-white + .va-logged-user + .dropdown-toggle-dark, che erano
   il nome a fianco di un'icona di ruolo e il triangolino di Bootstrap. Le tre
   classi non sono usate da nessun'altra parte nei due repository.

   La barra e' sempre --teal-900 quando questo chip si vede: l'unica pagina con
   la barra trasparente e' la homepage, e li' lep_home_redirect() manda gli
   autenticati alla loro area prima che il template giri. I colori qui sotto
   danno quindi per scontato quel fondo, ed e' vero.                          */

.va-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  border-radius: var(--radius-pill);
  /* teal-800 al 55% sul teal-900 della barra: un rilievo, non un secondo colore */
  background: rgba(var(--teal-800-rgb), 0.55);
  border: 1.5px solid var(--teal-400); /* 3,87:1 sul fondo — passa 1.4.11 */
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.va-user-chip:hover {
  border-color: var(--teal-100);
}
.va-user-chip:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}
.va-user-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--teal-50);
  color: var(--teal-600); /* 5,54:1 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12.5px;
  line-height: 1;
}
.va-user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-50); /* 9,91:1 sul fondo del chip */
}
.va-user-caret {
  font-size: 11px;
  color: var(--teal-100);
}

/* La tendina. Restano il markup e il meccanismo di Bootstrap: cambia il
   vestito. --bs-dropdown-spacer invece di un margin scritto a mano, perche' la
   tendina la posiziona Popper con una transform inline e un margine nostro
   litigherebbe con la sua. */
.va-user-menu {
  --bs-dropdown-spacer: 10px;
  min-width: 250px;
  padding: 8px;
  background: var(--teal-800);
  border: 1px solid var(--teal-600);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 50px -30px rgba(var(--teal-900-rgb), 0.6);
}
.va-user-menu .dropdown-item {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--teal-50); /* 8,28:1 */
  white-space: normal;
}
.va-user-menu .dropdown-item:hover,
.va-user-menu .dropdown-item:focus {
  background: var(--teal-600);
  color: var(--teal-50); /* 5,47:1 */
  text-decoration: none;
}
.va-user-menu .dropdown-item:active {
  background: var(--teal-600);
  color: var(--teal-50);
}
/* L'uscita si stacca dalle voci di navigazione senza gridare: un gradino di
   rampa, non un rosso. Uscire non e' distruttivo. */
.va-user-menu .va-user-out {
  color: var(--teal-100);
}
.va-user-menu .dropdown-divider {
  margin: 6px 8px;
  border-top: 1px solid var(--teal-600);
  opacity: 1;
}

.va-fs-7 {
  font-size: 0.75rem !important;
}

/* La barra della homepage galleggia sull'hero: e' trasparente e viene risucchiata
   sopra il contenuto da un margine negativo. Quel margine deve valere ESATTAMENTE
   l'altezza della barra — se e' piu' corto, fra il bordo alto della finestra e
   l'hero resta una striscia del fondo bianco del body.

   Era scritto -56px, e per un po' e' stato giusto: l'elemento piu' alto della barra
   erano il logo e i .nav-link, 40px, piu' i 16px di padding della navbar. Poi il
   bridge del design system ha ridefinito i bottoni (--bs-btn-padding-y: 10px,
   corpo 13.5px, bordo 1.5px): l'«Accedi» e' passato a ~42px ed e' diventato lui a
   decidere l'altezza, 58,25px, cioe' 2,25px oltre la compensazione. Quei 2,25px
   erano la striscia bianca in cima alla homepage.

   L'altezza la misura ora lat_homepage.js e la scrive in --le-hp-nav-h a ogni
   size() (caricamento e ridimensionamento), come gia' fa per il primo scalino
   della pila di carte. Il ripiego a 56px vale solo dove il JS non gira: la pagina
   resta leggibile, con la striscia di prima. */
@media screen and (min-width: 992px) {
	nav.navbar.va-navbar-home {
	  background-color: transparent !important;
	  margin-bottom: calc(-1 * var(--le-hp-nav-h, 56px)) !important;
	}
}

.va-navbar-logo {
  /* lockup 196x64 su fondo teal-900. Era knockout-white, cioe' tutto bianco: la
     variante giusta finche' la barra era grigio neutro. Ora che e' verde il
     marchio torna a essere coral pieno con l'onda chiara — la forma con cui Ledea
     si riconosce — e il lettering passa al teal-50 di on-teal.
     Il file e' DERIVATO da ledea-lockup-h-primary.svg col solo lettering
     ricolorato, perche' il pacchetto non ha una variante con la tile coral piena e
     il lettering chiaro; vedi la nota dentro l'SVG e docs/punti-aperti.md.
     Contrasti: tile #D85A30 su teal-900 3,5:1 e onda #FAECE7 sulla tile 3,4:1,
     entrambi sopra il 3:1 che WCAG 1.4.11 chiede agli elementi non testuali;
     lettering teal-50 su teal-900, 12,2:1.
     120px = taglia 'app/mobile' del lockup, sopra il minimo di 90px. */
  background-image: url(assets/images/ledea-lockup-h-on-teal-tile.svg);
  height: 40px;
  width: 120px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  margin-right: 20px;
}

.va-container-sticky-top {
  padding-top: 0;
  min-height: calc(100dvh - var(--footer-height));
}
.va-container {
  padding-top: 0;
  min-height: calc(100dvh - var(--nav-height) - var(--footer-height) - var(--sidebar-height));
}
@media screen and (min-width: 768px) {
	.va-container {
    padding-top: 0;
    min-height: calc(100dvh - var(--nav-height) - var(--footer-height));
  }
}


html body a.iubenda-tp-btn.iubenda-cs-preferences-link[data-tp-float]:not([data-tp-anchored]) {
  margin-bottom: 75px !important;
}
/* A modale aperto il bottone flottante di Iubenda si nasconde (#57): sta sopra
   tutto e, su telefono, copriva il bottone principale del piede del modale
   («Salva il vaccino», «Aggiungi la campagna»). Nascondere e non spostare,
   perche' il piede cambia altezza da un modale all'altro. Bootstrap toglie
   modal-open alla chiusura, e il bottone torna; le preferenze restano nel
   footer. Il selettore non nomina il tag (a o button, lo decide lo script di
   Iubenda) e il :not(#le-x) gli da' il peso di un id, per battere gli
   !important del foglio di Iubenda. Se il markup cambiasse ancora, la difesa
   che non dipende dal nome e' let_hide_floating_over_modal() in
   assets/js/lat_functions.js. */
html body.modal-open .iubenda-tp-btn:not(#le-x),
html body.modal-open .iubenda-cs-preferences-link[data-tp-float]:not(#le-x) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.va-homepage-icon {
  display: flex;
  font-size: 10dvw;
  justify-content: center;
}

.va-indent {
  text-indent: 2rem;
}

.va-background-cover {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.va-background-card {
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center;
  background-size: cover;
}

.va-w-a {
  width: auto !important;
}

.va-no-events {
  pointer-events: none !important;
}

.wp-block-list {
  margin-left: 1.5rem !important;
}

/* Rotation */
.va-rotate-0 {
  display: inline-block;
  transform: rotate(0deg);
  transition: 0.4s;
}
.va-rotate-180 {
  transform: rotate(180deg);
  transition: 0.4s;
}


/* TABLE OF CONTENTS */
.va-toc {
  padding-left: 4rem !important;
}
ol.va-toc li a {
  text-decoration: none;
}
ol.va-toc li {
  font-size: large;
  font-weight: 700;
}
ol.va-toc ul li {
  font-size: inherit;
  font-weight: 400;
}

/* CAROUSEL */
.va-carousel-img {
  max-height: 60dvh;
  max-width: 80%;
}


/* FOOTER */
.va-footer {
  color: white;
  font-size: 12px;
  font-weight: 500;
}
.va-footer a {
  color: white;
  text-decoration: none;
}
.va-footer a:hover,
.va-footer a:focus {
  color: white;
  text-decoration: underline;
}


/* LINKS */
a.va-link-1,
a.va-link-2,
a.va-link-3,
a.va-link-4,
a.va-link-5 {
  color: black;
  text-decoration: none;
}
a.va-link-1:hover,
a.va-link-1:focus {
  color: var(--bs-primary);
  text-decoration: underline;
}
/* Hover dei link di testo. L'elenco in :not() sono i link che link non sono:
   bottoni e voci di navigazione, che hanno un colore e una superficie propri e
   non vanno sottolineati. .le-hp-btn e' della stessa famiglia — sono i bottoni
   della homepage — e va nell'elenco per lo stesso motivo: senza, questa regola
   vince per specificita' (a + :not(.btn) + :hover fa 0,2,1 contro lo 0,2,0 di
   una classe con pseudo-classe) e riporta i bottoni a --bs-secondary
   sottolineato, che sul verde scuro dell'hero e' quasi illeggibile.
   .le-gate-btn sono i bottoni del varco di accesso del plugin, e cascavano nella
   stessa trappola con l'esito peggiore possibile: il pieno «Accedi» ha il fondo
   hover su --primary-hover, cioe' teal-800, e questa regola gli portava il testo
   a --bs-secondary, che teal-800 lo e' anch'esso. Testo e fondo dello stesso
   identico colore, 1:1, sul solo modo di accedere che quella pagina offre — lo
   stesso difetto dell'«Accedi» in navbar corretto nella 2.0.0.
   .le-404-btn e' il «Torna alla home» della pagina 404, aggiunto qui PRIMA che il
   difetto si vedesse: quel bottone e' un pieno chiaro (teal-100 con etichetta
   teal-900) su fondo teal-900, e questa regola gli porterebbe l'etichetta a
   --bs-secondary, cioe' teal-800 su teal-100 — leggibile, ma con la sottolineatura
   e il colore sbagliato sull'unica uscita da una pagina che e' un vicolo cieco.
   .le-pt-btn sono i bottoni dell'interfaccia paziente (le sei pagine ridisegnate
   dal plugin: bacheca, connessioni, appuntamenti, profilo e le due prenotazioni).
   La meta' di quei bottoni e' un <a> — le carte-link della bacheca, il «Prenota una
   visita», il «Torna al profilo» — quindi ci sarebbero passati tutti.
   .le-auth-btn sono i bottoni delle schermate di accesso (wp-login.php vestito dal
   plugin: accesso, password dimenticata, nuova password, crea utente). Il tema e'
   caricato anche li' da let_login_scripts(), quindi questa regola ci arriva, e
   l'unico bottone che quelle pagine hanno e' la via d'uscita delle card di esito:
   perderlo vorrebbe dire lasciare senza uscita chi ha appena creato l'account.
   .le-st-btn sono i bottoni dell'area dei professionisti (le pagine dello staff,
   la guida e la compravendita, ridisegnate dal plugin), e .le-st-side-link le voci
   della loro barra laterale: la voce spenta per il ruolo e' un <a> senza href, che
   :hover lo prende lo stesso e che questa regola sottolineerebbe. Entrambe le
   regole del plugin vincono gia' da sole (.le-st davanti fa 0,3,1), come per i
   pazienti: l'elenco e' la difesa che tiene se il plugin installato e' indietro.
   .le-st-side-title-link e' il titolo di un gruppo della stessa barra quando
   porta a una pagina (Visite, Vaccinazioni…): chiaro su --teal-900, e questa
   regola gli darebbe --bs-secondary, cioe' teal-800, cioe' il fondo.
   .le-rd-btn sono i bottoni delle pagine di lettura del tema (risorse pubbliche,
   guida vista da fuori dall'area, ricerca: assets/css/lat_reading.css), e fra
   loro c'e' il pieno «Accedi» della guida riservata: la regola gli porterebbe il
   testo a teal-800 sul fondo hover teal-800.
   .le-st-stat sono i riquadri di statistiche delle pagine di sezione dell'area dei
   professionisti (ledea-plugin#153): quelli che portano a una pagina sono
   un <a>. Senza, al passaggio del mouse numero,
   etichetta e sottotitolo prenderebbero teal-800 sottolineato.
   E' la NONA famiglia di bottoni che passa di qui: chi ne aggiunge una decima si
   ricordi di questo elenco. */
a:not(.btn,.nav-link,.dropdown-item,.le-hp-btn,.le-gate-btn,.le-404-btn,.le-pt-btn,.le-auth-btn,.le-st-btn,.le-st-side-link,.le-st-side-title-link,.le-rd-btn,.le-st-stat):hover,
a:not(.btn,.nav-link,.dropdown-item,.le-hp-btn,.le-gate-btn,.le-404-btn,.le-pt-btn,.le-auth-btn,.le-st-btn,.le-st-side-link,.le-st-side-title-link,.le-rd-btn,.le-st-stat):focus,
a.va-link-2:hover,
a.va-link-2:focus {
  color: var(--bs-secondary);
  text-decoration: underline;
}
a.va-link-3:hover,
a.va-link-3:focus {
  color: var(--bs-dark);
  text-decoration: underline;
}
a.va-link-4:hover,
a.va-link-4:focus {
  color: var(--gray-400);
  text-decoration: underline;
}
a.va-link-5:hover,
a.va-link-5:focus {
  color: var(--gray-200);
  text-decoration: underline;
}

/* COLOURS */
.va-color-1 {
  color: var(--bs-primary);
}
.va-color-2 {
  color: var(--bs-secondary);
}
.va-color-3 {
  color: var(--bs-dark);
}
.va-color-4 {
  color: var(--gray-400);
}
.va-color-5 {
  color: var(--gray-200);
}
.va-a-50 {
  opacity: 0.5 !important;
}


/* BUTTONS */
/* Gli hover passano per --primary-hover / --secondary-hover, non per un gradino
   della rampa scritto a mano: con l'export 2026-08 il primario e' cambiato tinta
   e i due valori fissi qui (--coral-600 e --teal-800) sarebbero diventati uno un
   hover corallo su un bottone teal, l'altro un hover identico allo stato di
   riposo. Il resto di queste classi legge gia' i ruoli Bootstrap dal bridge. */
.va-button-outline-1 {
  color: var(--bs-primary) !important;
  border: var(--bs-btn-border-width) solid var(--bs-primary) !important;
  background-color: transparent !important;
}
.va-button-outline-1:hover,
.va-button-outline-1:focus {
  color: white !important;
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-primary) !important;
}
.va-button-outline-2 {
  color: var(--bs-secondary) !important;
  border: var(--bs-btn-border-width) solid var(--bs-secondary) !important;
  background-color: transparent !important;
}
.va-button-outline-2:hover,
.va-button-outline-2:focus {
  color: white !important;
  border-color: var(--bs-secondary) !important;
  background-color: var(--bs-secondary) !important;
}
.va-button-outline-3 {
  color: var(--bs-dark) !important;
  border: var(--bs-btn-border-width) solid var(--bs-dark) !important;
  background-color: transparent !important;
}
.va-button-outline-3:hover,
.va-button-outline-3:focus {
  color: white !important;
  border-color: var(--bs-dark) !important;
  background-color: var(--bs-dark) !important;
}
.va-button-outline-4 {
  color: var(--gray-400) !important;
  border: var(--bs-btn-border-width) solid var(--gray-400) !important;
  background-color: transparent !important;
}
.va-button-outline-4:hover,
.va-button-outline-4:focus {
  color: white !important;
  border-color: var(--gray-400) !important;
  background-color: var(--gray-400) !important;
}
.va-button-outline-5 {
  color: var(--gray-200) !important;
  border: var(--bs-btn-border-width) solid var(--gray-200) !important;
  background-color: transparent !important;
}
.va-button-outline-5:hover,
.va-button-outline-5:focus {
  color: white !important;
  border-color: var(--gray-200) !important;
  background-color: var(--gray-200) !important;
}
.va-button-1 {
  color: white !important;
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-primary) !important;
}
.va-button-1:hover,
.va-button-1:focus {
  color: white !important;
  border-color: var(--primary-hover) !important;
  background-color: var(--primary-hover) !important;
}

.va-button-2 {
  color: white !important;
  border-color: var(--bs-secondary) !important;
  background-color: var(--bs-secondary) !important;
}
.va-button-2:hover,
.va-button-2:focus {
  color: white !important;
  border-color: var(--secondary-hover) !important;
  background-color: var(--secondary-hover) !important;
}
.va-button-3 {
  color: white !important;
  border-color: var(--bs-dark) !important;
  background-color: var(--bs-dark) !important;
}
.va-button-3:hover,
.va-button-3:focus {
  color: white !important;
  border-color: var(--gray-900) !important;
  background-color: var(--gray-900) !important;
}
.va-button-4 {
  color: white !important;
  border-color: var(--gray-400) !important;
  background-color: var(--gray-400) !important;
}
.va-button-4:hover,
.va-button-4:focus {
  color: white !important;
  border-color: var(--gray-600) !important;
  background-color: var(--gray-600) !important;
}
.va-button-5 {
  color: white !important;
  border-color: var(--gray-200) !important;
  background-color: var(--gray-200) !important;
}
.va-button-5:hover,
.va-button-5:focus {
  color: white !important;
  border-color: var(--gray-400) !important;
  background-color: var(--gray-400) !important;
}

.va-button-outline-white-1 {
  color: white !important;
  border: var(--bs-btn-border-width) solid white !important;
  background-color: transparent !important;
}
.va-button-outline-white-1:hover,
.va-button-outline-white-1:focus {
  color: var(--bs-primary) !important;
  border-color: white !important;
  background-color: white !important;
}

.va-button-white-grey {
  color: var(--ink) !important;
  border: var(--bs-btn-border-width) solid var(--border) !important;
  background-color: var(--paper) !important;
}
.va-button-white-grey:hover,
.va-button-white-grey:focus {
  color: var(--ink) !important;
  border-color: var(--border) !important;
  background-color: var(--gray-100) !important;
}