<h2>default</h2>
<div class="accent-color-scale"></div>

<h2>.error</h2>
<div class="error accent-color-scale"></div>

<h2>.warning</h2>
<div class="warning accent-color-scale"></div>

<h2>.success</h2>
<div class="success accent-color-scale"></div>

<h2>.info</h2>
<div class="info accent-color-scale"></div>

<h2>.accent-primary</h2>
<div class="accent-primary accent-color-scale"></div>

<h2>.accent-secondary</h2>
<div class="accent-secondary accent-color-scale"></div>

<h2>.accent-tertiary</h2>
<div class="accent-tertiary accent-color-scale"></div>

.accent-primary {
  --accent-color: var(--color-purple);
  --link-color: #fff;
  --heading-color: #fff;
}

.accent-secondary {
  --accent-color: var(--color-blue);
  --accent-color-700: var(--color-blue-700);
  --link-color: #fff;
  --heading-color: #fff;
}

.accent-tertiary {
  --accent-color: var(--color-aqua);
  --accent-color-700: var(--color-aqua-700);
  --link-color: color-mix(in srgb, var(--color-purple), #000 40%);
}

.accent-white {
  --accent-color-50: rgb(255 255 255 / .1);
  --accent-color-100: rgb(255 255 255 / .2);
  --accent-color-200: rgb(255 255 255 / .4);
  --accent-color-300: rgb(255 255 255 / .6);
  --accent-color-400: rgb(255 255 255 / .8);
  --accent-color: #fff;
  --accent-color-text: var(--color-purple);
}

.accent-black {
  --accent-color: #000;
  --accent-color-600: rgb(0 0 0 / .8);
  --accent-color-700: rgb(0 0 0 / .6);
  --accent-color-800: rgb(0 0 0 / .4);
  --accent-color-900: rgb(0 0 0 / .2);
  --accent-color-950: rgb(0 0 0 / .1);
}

.error {
  --accent-color-50: var(--root-color-error-50);
  --accent-color: var(--root-color-error);
  --accent-color-900: var(--root-color-error-900);
}

.warning {
  --accent-color-50: var(--root-color-warning-50);
  --accent-color: var(--root-color-warning);
  --accent-color-900: var(--root-color-warning-900);
}

.success {
  --accent-color-50: var(--root-color-success-50);
  --accent-color: var(--root-color-success);
  --accent-color-900: var(--root-color-success-900);
}

.info {
  --accent-color-50: var(--root-color-info-50);
  --accent-color: var(--root-color-info);
  --accent-color-900: var(--root-color-info-900);
}