@layer catppuccin {
  :root {
    --sl-color-accent-low: hsl(267, 84%, 21%);
    --sl-color-accent: hsl(267, 84%, 61%);
    --sl-color-accent-high: hsl(267, 84%, 81%);
    --sl-color-white: #cdd6f4;
    --sl-color-gray-1: #bac2de;
    --sl-color-gray-2: #a6adc8;
    --sl-color-gray-3: #9399b2;
    --sl-color-gray-4: #45475a;
    --sl-color-gray-5: #313244;
    --sl-color-gray-6: #181825;
    --sl-color-gray-7: #11111b;
    --sl-color-black: #1e1e2e;

    --sl-hue-orange: 23;
    --sl-color-orange-low: hsl(23, 32%, 25%);
    --sl-color-orange: hsl(23, 72%, 76%);
    --sl-color-orange-high: hsl(23, 92%, 76%);
    --sl-hue-green: 115;
    --sl-color-green-low: hsl(115, 14%, 26%);
    --sl-color-green: hsl(115, 34%, 76%);
    --sl-color-green-high: hsl(115, 54%, 76%);
    --sl-hue-blue: 217;
    --sl-color-blue-low: hsl(217, 32%, 26%);
    --sl-color-blue: hsl(217, 72%, 76%);
    --sl-color-blue-high: hsl(217, 92%, 76%);
    --sl-hue-purple: 267;
    --sl-color-purple-low: hsl(267, 33%, 26%);
    --sl-color-purple: hsl(267, 64%, 81%);
    --sl-color-purple-high: hsl(267, 84%, 81%);
    --sl-hue-red: 343;
    --sl-color-red-low: hsl(343, 26%, 25%);
    --sl-color-red: hsl(343, 61%, 75%);
    --sl-color-red-high: hsl(343, 81%, 75%);

    color-scheme: dark;
  }
}