:root {
  /* Catppuccin latte */
  --hsl-rosewater: 11deg, 59%, 67%;
  --hsl-flamingo: 0deg, 60%, 67%;
  --hsl-pink: 316deg, 73%, 69%;
  --hsl-mauve: 266deg, 85%, 58%;
  --hsl-red: 347deg, 87%, 44%;
  --hsl-maroon: 355deg, 76%, 59%;
  --hsl-peach: 22deg, 99%, 52%;
  --hsl-yellow: 35deg, 77%, 49%;
  --hsl-green: 109deg, 58%, 40%;
  --hsl-teal: 183deg, 74%, 35%;
  --hsl-sky: 197deg, 97%, 46%;
  --hsl-sapphire: 189deg, 70%, 42%;
  --hsl-blue: 220deg, 91%, 54%;
  --hsl-lavender: 231deg, 97%, 72%;
  --hsl-text: 234deg, 16%, 35%;
  --hsl-subtext1: 233deg, 13%, 41%;
  --hsl-subtext0: 233deg, 10%, 47%;
  --hsl-overlay2: 232deg, 10%, 53%;
  --hsl-overlay1: 231deg, 10%, 59%;
  --hsl-overlay0: 228deg, 11%, 65%;
  --hsl-surface2: 227deg, 12%, 71%;
  --hsl-surface1: 225deg, 14%, 77%;
  --hsl-surface0: 223deg, 16%, 83%;
  --hsl-base: 220deg, 23%, 95%;
  --hsl-mantle: 220deg, 22%, 92%;
  --hsl-crust: 220deg, 21%, 89%;

  --hsl-black: 0deg, 100%, 0%;

  &[data-color-scheme="dark"] {
    /* Catppuccin mocha */
    --hsl-rosewater: 10deg, 56%, 91%;
    --hsl-flamingo: 0deg, 59%, 88%;
    --hsl-pink: 316deg, 72%, 86%;
    --hsl-mauve: 267deg, 84%, 81%;
    --hsl-red: 343deg, 81%, 75%;
    --hsl-maroon: 350deg, 65%, 77%;
    --hsl-peach: 23deg, 92%, 75%;
    --hsl-yellow: 41deg, 86%, 83%;
    --hsl-green: 115deg, 54%, 76%;
    --hsl-teal: 170deg, 57%, 73%;
    --hsl-sky: 189deg, 71%, 73%;
    --hsl-sapphire: 199deg, 76%, 69%;
    --hsl-blue: 217deg, 92%, 76%;
    --hsl-lavender: 232deg, 97%, 85%;
    --hsl-text: 226deg, 64%, 88%;
    --hsl-subtext1: 227deg, 35%, 80%;
    --hsl-subtext0: 228deg, 24%, 72%;
    --hsl-overlay2: 228deg, 17%, 64%;
    --hsl-overlay1: 230deg, 13%, 55%;
    --hsl-overlay0: 231deg, 11%, 47%;
    --hsl-surface2: 233deg, 12%, 39%;
    --hsl-surface1: 234deg, 13%, 31%;
    --hsl-surface0: 237deg, 16%, 23%;
    --hsl-base: 240deg, 21%, 15%;
    --hsl-mantle: 240deg, 21%, 12%;
    --hsl-crust: 240deg, 23%, 9%;
  }

  @media (prefers-color-scheme: dark) {
    &:not([data-color-scheme="light"]) {
      /* Catppuccin mocha */
      --hsl-rosewater: 10deg, 56%, 91%;
      --hsl-flamingo: 0deg, 59%, 88%;
      --hsl-pink: 316deg, 72%, 86%;
      --hsl-mauve: 267deg, 84%, 81%;
      --hsl-red: 343deg, 81%, 75%;
      --hsl-maroon: 350deg, 65%, 77%;
      --hsl-peach: 23deg, 92%, 75%;
      --hsl-yellow: 41deg, 86%, 83%;
      --hsl-green: 115deg, 54%, 76%;
      --hsl-teal: 170deg, 57%, 73%;
      --hsl-sky: 189deg, 71%, 73%;
      --hsl-sapphire: 199deg, 76%, 69%;
      --hsl-blue: 217deg, 92%, 76%;
      --hsl-lavender: 232deg, 97%, 85%;
      --hsl-text: 226deg, 64%, 88%;
      --hsl-subtext1: 227deg, 35%, 80%;
      --hsl-subtext0: 228deg, 24%, 72%;
      --hsl-overlay2: 228deg, 17%, 64%;
      --hsl-overlay1: 230deg, 13%, 55%;
      --hsl-overlay0: 231deg, 11%, 47%;
      --hsl-surface2: 233deg, 12%, 39%;
      --hsl-surface1: 234deg, 13%, 31%;
      --hsl-surface0: 237deg, 16%, 23%;
      --hsl-base: 240deg, 21%, 15%;
      --hsl-mantle: 240deg, 21%, 12%;
      --hsl-crust: 240deg, 23%, 9%;
    }
  }

  /* Abstractions */
  --color-bg: hsl(var(--hsl-base));
  --color-bg-secondary: hsl(var(--hsl-crust));
  --color-bg-surface: hsl(var(--hsl-surface0));

  --color-text: hsl(var(--hsl-text));
  --color-text-sub: hsl(var(--hsl-subtext0));
  --color-text-subtle: hsl(var(--hsl-overlay1));

  --color-link: hsl(var(--hsl-blue));

  --color-border: hsl(var(--hsl-text));
  --color-border-dark: hsl(var(--hsl-overlay2));
  --color-border-darker: hsl(var(--hsl-overlay1));

  --color-negative: hsl(var(--hsl-red));
  --color-positive: hsl(var(--hsl-green));

  --color-always-black: hsl(var(--hsl-black));

  --color-highlight: hsla(var(--hsl-overlay2), 0.2);
}