:root {
    --surface-rgb: 255, 255, 255;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --color-primary: #d39bce;
    --color-primary-hover: #e3b7df;
    --color-primary-active: #bd7fb7;
    --color-primary-light: #472042;
    --color-primary-dark: #f2dff0;

    --color-success: #2cc58a;
    --color-warning: #e3ad51;
    --color-error: #ff7a7a;
    --color-info: #68a3ff;

    --color-background: #0b1020;
    --color-surface: #11182c;
    --color-surface-elevated: #17213a;
    --color-border: #263250;

    --color-text-primary: #eef2ff;
    --color-text-secondary: #b7c1d9;
    --color-text-muted: #8b97b5;
    --color-disabled: #5f6b86;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(130, 41, 119, 0.14), transparent 34%),
        radial-gradient(circle at top right, rgba(24, 139, 97, 0.08), transparent 26%),
        var(--color-background);
    color: var(--color-text-primary);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}