:root {

  --primary-hover: initial;
  --primary-active: initial;
  --primary-border: initial;
  --control-outline: initial;

  --primary-hover-darken-channels: h s calc(l - 8.4);
  --primary-active-darken-channels: h s calc(l - 15.5);
  --primary-hover-lighten-channels: h s calc(l + 5.8);
  --primary-active-lighten-channels: h s calc(l + 11.6 - 17.4 * clamp(0, (l - 83.4) * 1000, 1));

  --primary-hover-channels: var(--primary-hover-darken-channels);
  --primary-active-channels: var(--primary-active-darken-channels);

  --primary-border-channels: h calc(s * 0.68) calc(l + 16);

  --control-outline-channels: h s calc(l - 5.3);
  --control-outline-alpha: 0.11;

  --text-link: initial;
  --text-brand: initial;
  --text-primary: initial;

  --text-link-channels: var(--primary-hover-channels);
  --text-brand-channels: var(--primary-hover-channels);

  --text-primary-channels: var(--primary-active-channels);

  --destructive-hover: 359 50.6% 53.1%;
  --destructive-active: 355 70.6% 33.3%;

  --control-outline-error: 4.3 87.6% 34.7%;
  --control-outline-error-alpha: 0.09;

  --ring: var(--primary);
}

.dark,
:root[data-theme="dark"] {
  --primary-hover-channels: var(--primary-hover-lighten-channels);
  --primary-active-channels: var(--primary-active-lighten-channels);

  --primary-border-channels: h calc(s * 0.467) calc(l * 0.27043);

  --control-outline-channels: h calc(s * 0.99) calc(l - 25.1);
  --control-outline-alpha: 0.29;

  --text-link-channels: h s l;
  --text-brand-channels: h s l;

  --text-primary-channels: var(--primary-hover-channels);

  --destructive-hover: 358.8 42.3% 53.1%;
  --destructive-active: 357.3 50.6% 34.1%;

  --control-outline-error: 351.5 98.3% 53.5%;
  --control-outline-error-alpha: 0.06;

  --ring: var(--primary);
}

@supports not (color: hsl(from red h s l)) {
  :root {
    --primary-hover: 268.7 100% 41.6%;
    --primary-active: 268.7 100% 34.5%;
    --primary-border: 268.7 68% 66%;
    --control-outline: 268.7 100% 44.7%;
    --text-link: 268.7 100% 41.6%;
    --text-brand: 268.7 100% 41.6%;
    --text-primary: 268.7 100% 34.5%;
  }

  .dark,
  :root[data-theme="dark"] {
    --primary-hover: 268.7 100% 92.7%;
    --primary-active: 268.7 100% 81.1%;
    --primary-border: 268.7 46.7% 23.5%;
    --control-outline: 268.7 99% 61.8%;
    --text-link: 268.7 100% 86.9%;
    --text-brand: 268.7 100% 86.9%;
    --text-primary: 268.7 100% 92.7%;
  }
}