@media (prefers-color-scheme: light) {
    :where(:root, html, [data-theme=light]) {
      --text: #081426;
      --background: #f3f6fc;
      --primary: #8cb1e8;
      --secondary: #d9e5f7;
      --accent: #2e71d6;
    }
}

@media (prefers-color-scheme: dark) {
    :where(:root, html, [data-theme=dark]) {
        --text: #d9e5f7;
        --background: #03070d;
        --primary: #173c73;
        --secondary: #081426;
        --accent: #296cd1;
    }
}

.custom-gradient {
    --_gradient-from: var(--secondary);
    --_gradient-to: var(--accent);
    --_from-percentage: 0%;
    --_to-percentage: 0%;
    --_gradient-direction: to left;

    background-image: linear-gradient(
        var(--_gradient-direction),
      var(--_gradient-from)
      var(--_gradient-to)
    );
}