html[data-mav-palette="clinical-blue"]{
  /* Project palette */
  --accent-1: var(--color-cblue-700);
  --accent-2: var(--color-cblue-100);
  --accent-3: var(--color-slate-900);
  --contrast-max: #000;
  --contrast-lg: var(--color-zinc-800);
  --contrast-md: var(--color-zinc-500);
  --contrast-sm: var(--color-gray-300);
  --contrast-xs: var(--color-gray-200);
  --contrast-none: #fff;
  --bg-primary: hsl(45 40% 98%);
  --bg-secondary:  hsl(42 38% 95%);
  --bg-tertiary: var(--color-zinc-800);
  --bg-quaternary: var(--color-zinc-950);

  --hover-accent1: var(--color-cblue-600);
  --hover-accent2:var(--color-cblue-300);
  --hover-conmax: var(--contrast-lg);
  --hover-connone: var(--contrast-xs);
  --hover-consm: var(--contrast-md);
}

html[data-mav-palette="emerald"]{
  /* Project palette */
  --accent-1: var(--color-emerald-600);
  --accent-2: var(--color-emerald-300);
  --accent-3: var(--color-emerald-900);
  --contrast-max: #000;
  --contrast-lg: var(--color-zinc-800);
  --contrast-md: var(--color-zinc-500);
  --contrast-sm: var(--color-gray-300);
  --contrast-xs: var(--color-gray-200);
  --contrast-none: #fff;
  --bg-primary: hsl(45 40% 98%);
  --bg-secondary:  hsl(42 38% 95%);
  --bg-tertiary: var(--color-zinc-800);
  --bg-quaternary: var(--color-zinc-950);

  --hover-accent1: var(--color-emerald-700);
  --hover-accent2:var(--color-emerald-400);
  --hover-conmax: var(--contrast-lg);
  --hover-connone: var(--contrast-xs);
  --hover-consm: var(--contrast-md);
}

html[data-mav-palette="indigo"]{
  /* Project palette */
  --accent-1: var(--color-indigo-600);
  --accent-2: var(--color-indigo-300);
  --accent-3: var(--color-indigo-900);
  --contrast-max: #000;
  --contrast-lg: var(--color-zinc-800);
  --contrast-md: var(--color-zinc-500);
  --contrast-sm: var(--color-gray-300);
  --contrast-xs: var(--color-gray-200);
  --contrast-none: #fff;
  --bg-primary: hsl(45 40% 98%);
  --bg-secondary:  hsl(42 38% 95%);
  --bg-tertiary: var(--color-zinc-800);
  --bg-quaternary: var(--color-zinc-950);

  --hover-accent1: var(--color-indigo-700);
  --hover-accent2:var(--color-indigo-400);
  --hover-conmax: var(--contrast-lg);
  --hover-connone: var(--contrast-xs);
  --hover-consm: var(--contrast-md);
}

html[data-mav-palette="orange"]{
  /* Project palette */
  --accent-1: var(--color-orange-600);
  --accent-2: var(--color-orange-300);
  --accent-3: var(--color-orange-900);
  --contrast-max: #000;
  --contrast-lg: var(--color-zinc-800);
  --contrast-md: var(--color-zinc-500);
  --contrast-sm: var(--color-gray-300);
  --contrast-xs: var(--color-gray-200);
  --contrast-none: #fff;
  --bg-primary: hsl(45 40% 98%);
  --bg-secondary:  hsl(42 38% 95%);
  --bg-tertiary: var(--color-zinc-800);
  --bg-quaternary: var(--color-zinc-950);

  --hover-accent1: var(--color-orange-700);
  --hover-accent2:var(--color-orange-400);
  --hover-conmax: var(--contrast-lg);
  --hover-connone: var(--contrast-xs);
  --hover-consm: var(--contrast-md);
}

[data-mav-palette-switcher]{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

[data-mav-palette-option]{
  border: 1px solid color-mix(in srgb, var(--contrast-lg) 18%, transparent);
  border-radius: 999px;
  background-color: var(--bg-primary);
  color: var(--contrast-lg);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 10px 14px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-mav-palette-option]:hover{
  background-color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-1) 24%, transparent);
}

[data-mav-palette-option][aria-pressed="true"]{
  background-color: var(--accent-1);
  border-color: var(--accent-1);
  color: var(--contrast-none);
}