@layer catppuccin {
  :root[data-theme='light'] {
    --sl-color-accent-low: hsl(347, 87%, 66%);
    --sl-color-accent: hsl(347, 87%, 44%);
    --sl-color-accent-high: hsl(347, 87%, 34%);
    --sl-color-white: #4c4f69;
    --sl-color-gray-1: #5c5f77;
    --sl-color-gray-2: #6c6f85;
    --sl-color-gray-3: #7c7f93;
    --sl-color-gray-4: #bcc0cc;
    --sl-color-gray-5: #ccd0da;
    --sl-color-gray-6: #e6e9ef;
    --sl-color-gray-7: #dce0e8;
    --sl-color-black: #eff1f5;

    --sl-hue-orange: 22;
    --sl-color-orange-low: hsl(22, 69%, 87%);
    --sl-color-orange: hsl(22, 99%, 42%);
    --sl-color-orange-high: hsl(22, 99%, 52%);
    --sl-hue-green: 109;
    --sl-color-green-low: hsl(109, 27%, 75%);
    --sl-color-green: hsl(109, 58%, 30%);
    --sl-color-green-high: hsl(109, 58%, 40%);
    --sl-hue-blue: 220;
    --sl-color-blue-low: hsl(220, 61%, 89%);
    --sl-color-blue: hsl(220, 91%, 44%);
    --sl-color-blue-high: hsl(220, 91%, 54%);
    --sl-hue-purple: 266;
    --sl-color-purple-low: hsl(266, 55%, 88%);
    --sl-color-purple: hsl(266, 85%, 48%);
    --sl-color-purple-high: hsl(266, 85%, 58%);
    --sl-hue-red: 347;
    --sl-color-red-low: hsl(347, 56%, 84%);
    --sl-color-red: hsl(347, 87%, 34%);
    --sl-color-red-high: hsl(347, 87%, 44%);

    color-scheme: light;
  }
}