html[data-mav-palette="clinical-blue"]{
  /* Project palette */
  --accent-1: var(--color-cblue-700);
  --accent-2: var(--color-cblue-100);
  --accent-3: var(--color-cblue-950);
  --contrast-max: #07111f;
  --contrast-lg: var(--color-cblue-950);
  --contrast-md: var(--color-cblue-700);
  --contrast-sm: var(--color-cblue-200);
  --contrast-xs: var(--color-cblue-100);
  --contrast-none: #fff;
  --bg-primary: #f7fbff;
  --bg-secondary: var(--color-cblue-100);
  --bg-tertiary: var(--color-cblue-950);

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

html[data-mav-palette="warm-taupe"]{
  /* Project palette */
  --accent-1: var(--color-taupe-700);
  --accent-2: var(--color-taupe-100);
  --accent-3: var(--color-taupe-950);
  --contrast-max: #1b1715;
  --contrast-lg: var(--color-taupe-800);
  --contrast-md: var(--color-taupe-600);
  --contrast-sm: var(--color-taupe-200);
  --contrast-xs: var(--color-taupe-100);
  --contrast-none: #fff;
  --bg-primary: var(--color-taupe-50);
  --bg-secondary: var(--color-taupe-100);
  --bg-tertiary: var(--color-taupe-950);

  --hover-accent1: var(--color-taupe-600);
  --hover-accent2: var(--color-taupe-200);
  --hover-conmax: var(--contrast-lg);
  --hover-connone: var(--contrast-xs);
  --hover-consm: var(--contrast-xs);
}

[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);
}