:root {
    color-scheme: dark;
    --km-deep: #0d071b;
    --km-violet: #6a35f4;
    --km-lilac: #a974ff;
    --km-soft: #dcc8ff;
    --km-white: #f6edff;
    --km-accent-dark: #2a185a;
    --km-bg: #0d071b;
    --km-surface: #17102b;
    --km-surface-raised: #21143d;
    --km-text: #f6edff;
    --km-muted: #cbbbe6;
    --km-line: rgba(220, 200, 255, 0.2);
    --km-field: rgba(12, 6, 27, 0.72);
    --km-danger: #ff8fa5;
    --km-focus: rgba(169, 116, 255, 0.36);
    --km-shadow: rgba(7, 3, 18, 0.5);
    --km-gradient: linear-gradient(135deg, #6a35f4, #a974ff);
    --km-font: Montserrat, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

html[data-theme="light"] {
    color-scheme: light;
    --km-bg: #f6edff;
    --km-surface: #ffffff;
    --km-surface-raised: #f1e8ff;
    --km-text: #0d071b;
    --km-muted: #675b78;
    --km-line: rgba(42, 24, 90, 0.2);
    --km-field: #ffffff;
    --km-danger: #b42346;
    --km-focus: rgba(106, 53, 244, 0.22);
    --km-shadow: rgba(42, 24, 90, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--km-font); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--km-focus); outline-offset: 2px; }
::selection { background: var(--km-lilac); color: var(--km-deep); }