The dark variant is not correctly applied when setting a custom variant

I'm using the following custom variant for dark:

```scss
@import "tailwindcss";
@import "@catppuccin/tailwindcss/mocha.css";
@custom-variant dark (&:where(.dark, .dark *));
```

Except when I apply the `dark` class to my `html` element, the Mocha colors do not apply, and the Latte colors are still applied as if the class wasn't taken into account. After looking into the generated CSS, it looks like this:

```scss
@layer base {
:root {
/* Latte colors */
}
@variant dark {
:root {
/* Mocha colors */
}
}
/* Custom theme classes */
}
```

The issue is that `:root` is not a child of my dark custom variant definition, they are the same element, but the selector does not apply.
For example, something like this works:
```scss
@layer base {
:root {
/* Latte colors */
}
@variant dark {
&:root {
/* Mocha colors */
}
}
/* Custom theme classes */
}
```

I'm just getting started on Tailwind so maybe there's a workaround that I don't know of. Any ideas?

Start with the SCSS configuration shown in the issue and inspect the generated CSS for the `@variant dark` rules and `:root` selectors. Reproduce the custom variant with the `dark` class on `html`; the work is done when the Mocha colors apply under that class while Latte remains the default.

Written by the indexing model from the issue text.