:root {
    color-scheme: light;

    --background: #f6f1e4;
    --surface: #fffdf7;
    --surface-hover: #faf5e9;
    --text: #12233f;
    --border: #e6dcc2;
    --border-strong: #d4c6a4;
    --text-soft: #667085;
    --accent: #12233f;
    --danger: #b33a3a;
    --shadow: 0 12px 35px rgba(18, 35, 63, 0.07);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --background: #0f1e36;
        --surface: #16294a;
        --surface-hover: #1b3157;
        --text: #f2ecdd;
        --border: #294063;
        --border-strong: #39547c;
        --text-soft: #b8c2d4;
        --accent: #f2ecdd;
        --danger: #ff8b8b;
        --shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
    }
}

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

    --background: #0f1e36;
    --surface: #16294a;
    --surface-hover: #1b3157;
    --text: #f2ecdd;
    --border: #294063;
    --border-strong: #39547c;
    --text-soft: #b8c2d4;
    --accent: #f2ecdd;
    --danger: #ff8b8b;
    --shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
}

:root[data-theme="light"] {
    color-scheme: light;

    --background: #f6f1e4;
    --surface: #fffdf7;
    --surface-hover: #faf5e9;
    --text: #12233f;
    --border: #e6dcc2;
    --border-strong: #d4c6a4;
    --text-soft: #667085;
    --accent: #12233f;
    --danger: #b33a3a;
    --shadow: 0 12px 35px rgba(18, 35, 63, 0.07);
}

* {
    box-sizing: border-box;
}

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

body {
    background: var(--background);
    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

button,
input {
    font: inherit;
}

.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    padding: 0;

    border: 1px solid var(--border-strong);
    border-radius: 10px;

    background: var(--surface);
    color: var(--text-soft);

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.theme-toggle:hover {
    color: var(--text);
    border-color: var(--accent);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

.theme-toggle .sun {
    display: none;
}

.theme-toggle .moon {
    display: block;
}

:root[data-theme="dark"] .theme-toggle .sun {
    display: block;
}

:root[data-theme="dark"] .theme-toggle .moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .sun {
        display: block;
    }

    :root:not([data-theme="light"]) .theme-toggle .moon {
        display: none;
    }
}