:root {
  --groc:#F1E967;
  --lila:#D7C8FF;
  --fucsia:#B82585;
  --negre:#000000;
  --blanc:#ffffff;
  --lila-light:#f0eaff;
  --gris:#c9c9c9;
  
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: var(--lila);
  --bs-pink: var(--fucsia);
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: var(--groc);
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-white: var(--blanc);
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  
  --bs-primary: var(--negre);
  --bs-secondary: var(--fucsia);
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-link-color: var(--fucsia);
  --bs-link-hover-color: var(--negre);
  
  --bs-body-color: var(--negre);
}

body {
  color: var(--negre);
  background: var(--blanc);
  
}
.groc {
  color: var(--groc);
}
.lila {
  color: var(--lila);
}
.fucsia {
  color: var(--fucsia);
}
.negre {
  color: var(--negre);
}
.blanc {
  color: var(--blanc);
}
.gris {
  color: var(--gris);
}
.bg-groc {
  background-color: var(--groc);
}
.bg-lila {
  background-color: var(--lila);
}
.bg-fucsia {
  background-color: var(--fucsia);
}
.bg-negre {
  background-color: var(--negre);
}
.bg-blanc {
  background-color: var(--blanc);
}
.bg-gris {
  background-color: var(--gris);
}
.lila-light{
	color: var(--lila-light);
}
.bg-lila-light {
  background-color: var(--lila-light);
}


#page,
#main-wrapper{
  background: var(--blanc);
}
.region-primary-menu .menu-item a.is-active,
.region-primary-menu .menu-item--active-trail a {
  background: var(--fucsia);
}

.tabs ul.primary li a.is-active {
  background-color: var(--fucsia);
}

.tabs ul.primary li.is-active a {
  background-color: var(--blanc);
  border-bottom-color: var(--blanc);
}

#navbar-top {
  background-color: var(--blanc);
}

#navbar-main {
  background-color: var(--blanc);
}

a,
.link {
  color: var(--fucsia);
}

a:hover,
a:focus,
.link:hover,
.link:focus {
  color: var(--negre);
}
#footer-top a svg path{
  fill: var(--negre);
}
#footer-top a:hover svg path,
#footer-top a:focus svg path {
  fill: var(--groc);
}

.dropdown-menu { 
  --bs-dropdown-color:var(--negre);
  --bs-dropdown-bg:var(--blanc);
  --bs-dropdown-border-color:var(--bs-border-color-translucent);
  --bs-dropdown-divider-bg:var(--bs-border-color-translucent);
  --bs-dropdown-link-color:var(--negre);
  --bs-dropdown-link-hover-color:var(--fucsia);
  --bs-dropdown-link-hover-bg:var(--blanc);
  --bs-dropdown-link-active-color::var(--fucsia);
  --bs-dropdown-link-active-bg:var(--blanc);
  --bs-dropdown-link-disabled-color:var(--bs-tertiary-color);
  color:var(--bs-dropdown-color);
  background-color:var(--bs-dropdown-bg);
}

.dropdown-menu a{
	color:var(--negre);
}
.dropdown-menu a:hover, .dropdown-menu a:active, 
.nav-item .dropdown-item a.active{
	color:var(--fucsia);
} 

.nav-link {
	color: var(--negre);	
}
.nav-link:hover,
.nav-link:focus {
  color: var(--fucsia);
}
a:active,
.link:active {
  color: var(--fucsia);
}

.page-item.active .page-link {
  background-color: var(--blanc);	
  border-color: var(--negre);	
  color: var(--negre);	
}

.page-link,
.page-link:hover {
  color: var(--negre);
}

.btn-primary {
  background-color: var(--negre);
  border-color: var(--blanc);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--lila);
}

.site-footer {
  background: var(--blanc);
  color: var(--negre);
}

.region-header,
.region-header a,
.region-header li a.is-active,
.region-header .site-branding__text,
.region-header .site-branding,
.region-header .site-branding__text a,
.region-header .site-branding a,
.region-secondary-menu .menu-item a,
.region-secondary-menu .menu-item a.is-active {
  color: var(--negre);
}

.btn {
	--bs-btn-bg: var(--negre);
	--bs-btn-color: var(--blanc);
	--bs-btn-border-color: var(--negre);
	--bs-btn-hover-color: var(--negre);
	--bs-btn-hover-bg: var(--blanc);
	--bs-btn-hover-border-color: var(--negre);
}
.btn-primary:hover, .btn-primary:focus,
.btn-secondary:hover, .btn-secondary:focus{
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}



.paragraph--color--rgba-pink-light {
  background: var(--lila);
}
.paragraph--color--rgba-purple-light {
  background: var(--fucsia);
}
.paragraph--color--rgba-yellow-light {
  background: var(--groc);
}