:root {
    color-scheme: light dark;
    --background: #eee7d8;
    --surface: #f9f5ec;
    --surface-raised: #fffdf8;
    --surface-muted: #e8e0d0;
    --text: #172019;
    --text-muted: #687269;
    --text-subtle: #8a8f86;
    --border: #d9d0bf;
    --border-strong: #c6bcaa;
    --accent: #148252;
    --accent-hover: #0d6841;
    --accent-soft: #dff1e3;
    --ink: #17231c;
    --ink-soft: #26342a;
    --danger-surface: #fff0ec;
    --danger-border: #dca99e;
    --danger-text: #96392c;
    --warning: #b8792d;
    --shadow: 0 12px 30px rgb(49 39 23 / 0.07);
    --radius: 0.8rem;
    font-family: Inter, "Avenir Next", Avenir, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--background);
    color: var(--text);
    font-size: 15px;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

input:not([type="checkbox"]),
select,
textarea {
    width: 100%;
    min-height: 2.8rem;
    padding: 0.68rem 0.78rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.5rem;
    outline: none;
    background: var(--surface-raised);
    color: var(--text);
    font-size: 0.9rem;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

button {
    min-height: 2.7rem;
    padding: 0.65rem 0.95rem;
    border: 1px solid var(--accent);
    border-radius: 0.5rem;
    background: var(--accent);
    color: white;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

button:hover:not(:disabled) {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    transform: translateY(-1px);
}

button.secondary {
    border-color: var(--border-strong);
    background: var(--surface-raised);
    color: var(--text);
}

button.secondary:hover:not(:disabled) {
    border-color: var(--text-muted);
    background: var(--surface-muted);
}

button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.validation-message,
.validation-errors {
    color: var(--danger-text);
    font-size: 0.82rem;
}

.validation-errors {
    margin: 0;
    padding: 0.75rem 0.9rem 0.75rem 1.8rem;
    border: 1px solid var(--danger-border);
    border-radius: 0.5rem;
    background: var(--danger-surface);
}

::selection {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
}

.system-page {
    max-width: 640px;
    min-height: 24rem;
    display: grid;
    align-content: center;
    justify-items: start;
}

.system-page > span {
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.system-page h1 {
    margin: 0.6rem 0;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.system-page p {
    margin: 0;
    color: var(--text-muted);
}

.system-page a {
    display: inline-flex;
    align-items: center;
    min-height: 2.7rem;
    margin-top: 1.5rem;
    padding: 0 0.95rem;
    border-radius: 0.5rem;
    background: var(--accent);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.system-page .request-id {
    margin-top: 1rem;
    font-size: 0.78rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #171b18;
        --surface: #202620;
        --surface-raised: #272e28;
        --surface-muted: #303730;
        --text: #f3f0e8;
        --text-muted: #b0b7ad;
        --text-subtle: #858e84;
        --border: #363e37;
        --border-strong: #485148;
        --accent: #6bc68c;
        --accent-hover: #84d49f;
        --accent-soft: #263f30;
        --ink: #101713;
        --ink-soft: #1b2820;
        --danger-surface: #3c2521;
        --danger-border: #71483f;
        --danger-text: #ffb6aa;
        --warning: #e5b568;
        --shadow: 0 12px 30px rgb(0 0 0 / 0.2);
    }
}