/* You can add global styles to this file, and also import other style files */

:root {
    --mistox-bg-dark: oklch(0.92 0.065 264);
    --mistox-bg-medium: oklch(0.96 0.065 264);
    --mistox-bg-light: oklch(1 0.065 264);

    --mistox-text: oklch(0.15 0.13 264);
    --mistox-text-sub: oklch(0.4 0.13 264);

    --mistox-border-light: oklch(1 0.13 264);
    --mistox-border: oklch(0.6 0.13 264);
    --mistox-border-dark: oklch(0.7 0.13 264);

    --mistox-button-text: oklch(1 0.00011 271.152);

    --mistox-button-primary: oklch(0.4 0.13 264);
    --mistox-button-primary-click: oklch(0.3 0.13 264);

    --mistox-button-secondary: oklch(0.4 0.13 84);
    --mistox-button-secondary-click: oklch(0.3 0.13 84);

    --mistox-alert-danger: oklch(0.5 0.13 30);
    --mistox-alert-warning: oklch(0.5 0.13 100);
    --mistox-alert-success: oklch(0.5 0.13 160);
    --mistox-alert-info: oklch(0.5 0.13 260);

    --mistox-shadow: 0px 2px 2px oklch(0 0 0 / 0.2), 0px 4px 4px oklch(0 0 0 / 0.1);
    font-family: Arial, Helvetica, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --mistox-bg-dark: oklch(0.1 0.065 264);
        --mistox-bg-medium: oklch(0.15 0.065 264);
        --mistox-bg-light: oklch(0.2 0.065 264);

        --mistox-text: oklch(0.96 0.1 264);
        --mistox-text-sub: oklch(0.76 0.1 264);

        --mistox-border-light: oklch(0.5 0.13 264);
        --mistox-border: oklch(0.4 0.13 264);
        --mistox-border-dark: oklch(0.3 0.13 264);

        --mistox-button-text: oklch(0 0.00011 271.152);

        --mistox-button-primary: oklch(0.76 0.13 264);
        --mistox-button-secondary: oklch(0.76 0.13 84);

        --mistox-alert-danger: oklch(0.7 0.13 30);
        --mistox-alert-warning: oklch(0.7 0.13 100);
        --mistox-alert-success: oklch(0.7 0.13 160);
        --mistox-alert-info: oklch(0.7 0.13 260);

        --mistox-shadow: 0px 2px 2px oklch(0 0 0 / 0.2), 0px 4px 4px oklch(0 0 0 / 0.1);

        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
    }
}

html {
    background-color: #000;
}

body {
    background-color: var(--mistox-bg-dark);
}