:root {

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

  --primary-hover-darken-channels: h s calc(l - 8.4 + 18 * clamp(0, (12 - l) * 1000, 1));
  --primary-active-darken-channels: h s calc(l - 15.5 + 20.3 * clamp(0, (12 - l) * 1000, 1));
  --primary-hover-lighten-channels: h s calc(l + 5.8 - 11.6 * clamp(0, (l - 94) * 1000, 1));
  --primary-active-lighten-channels: h s
    calc(l + 11.6 - 17.4 * clamp(0, (l - 83.4) * 1000, 1) - 5.8 * clamp(0, (l - 94) * 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: h s calc(l - 8.4);
  --text-brand-channels: h s calc(l - 8.4);

  --text-primary-channels: h s calc(l - 15.5);

  --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: h s calc(l + 5.8);

  --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: 240 6% 19.6%;
    --primary-active: 240 6% 14.8%;
    --primary-border: 240 4.08% 26%;
    --control-outline: 240 6% 4.7%;
    --text-link: 240 6% 1.6%;
    --text-brand: 240 6% 1.6%;
    --text-primary: 240 6% 0%;
  }

  .dark,
  :root[data-theme="dark"] {
    --primary-hover: 0 0% 92.2%;
    --primary-active: 0 0% 86.4%;
    --primary-border: 0 0% 26.5%;
    --control-outline: 0 0% 72.9%;
    --text-link: 0 0% 98%;
    --text-brand: 0 0% 98%;
    --text-primary: 0 0% 100%;
  }
}