:root {
    color-scheme: light;
    --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-display: "Noto Serif SC", "Songti SC", "STSong", serif;
    --canvas: #f4f4f1;
    --surface: #ffffff;
    --surface-muted: #eeeee9;
    --surface-strong: #1d1c1a;
    --ink: #1d1c1a;
    --ink-muted: #686761;
    --ink-faint: #706e68;
    --line: #deddd6;
    --line-strong: #c6c4bb;
    --brand-solid: #b34b2e;
    --accent: #b34b2e;
    --accent-hover: #a54126;
    --accent-soft: #fbede7;
    --success: #237a4b;
    --success-soft: #e9f6ee;
    --warning: #8a6100;
    --warning-soft: #faf2dd;
    --danger: #b43a32;
    --danger-soft: #fbecea;
    --focus-outline: #b34b2e;
    --focus-ring: rgba(217, 111, 76, 0.22);
    --shadow-low: 0 1px 2px rgba(29, 28, 26, 0.04), 0 8px 24px rgba(29, 28, 26, 0.04);
}

html.dark {
    color-scheme: dark;
    --canvas: #151513;
    --surface: #1f1f1c;
    --surface-muted: #292925;
    --surface-strong: #f1f0ea;
    --ink: #f1f0ea;
    --ink-muted: #b8b6ae;
    --ink-faint: #8c8a83;
    --line: #393832;
    --line-strong: #56544c;
    --accent: #ec8b68;
    --accent-hover: #f29c7d;
    --accent-soft: #3b2720;
    --success: #72c795;
    --success-soft: #1d3326;
    --warning: #e1bc61;
    --warning-soft: #382f1d;
    --danger: #f09289;
    --danger-soft: #3c2321;
    --focus-outline: #ec8b68;
    --focus-ring: rgba(236, 139, 104, 0.28);
    --shadow-low: 0 1px 2px rgba(0, 0, 0, 0.32);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--canvas);
    text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-sans);
    letter-spacing: 0;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--canvas);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
select:not(:disabled) {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

h1,
.display-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
}

:focus-visible {
    outline: 3px solid var(--focus-outline);
    outline-offset: 2px;
}

::selection {
    background: var(--accent-soft);
    color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}