:root {

  --primary: 168 100% 25%;
  --primary-foreground: 60 33% 99%;

  --brand: 168 100% 25%;
  --brand-foreground: 60 33% 99%;

  --shadow-color: 18 43 38;
}

.dark,
:root[data-theme="dark"] {

  --primary: 168 60% 60%;
  --primary-foreground: 48 9% 9%;
  --brand: 168 60% 60%;
  --brand-foreground: 48 9% 9%;

  --shadow-color: 6 14 13;
}

@supports not (color: hsl(from red h s l)) {
  :root {
    --primary-hover: 168 100% 16.6%;
    --primary-active: 168 100% 9.5%;
    --primary-border: 168 68% 41%;
    --control-outline: 168 100% 19.7%;
    --text-link: 168 100% 16.6%;
    --text-brand: 168 100% 16.6%;
    --text-primary: 168 100% 9.5%;
  }

  .dark,
  :root[data-theme="dark"] {
    --primary-hover: 168 60% 65.8%;
    --primary-active: 168 60% 71.6%;
    --primary-border: 168 28% 16.2%;
    --control-outline: 168 59.4% 34.9%;
    --text-link: 168 60% 60%;
    --text-brand: 168 60% 60%;
    --text-primary: 168 60% 65.8%;
  }
}