:root {
    color-scheme: light;
    --ds-canvas: #f4f7f5;
    --ds-surface: #ffffff;
    --ds-surface-muted: #eef3f1;
    --ds-ink: #17231f;
    --ds-ink-soft: #53615c;
    --ds-muted: #697670;
    --ds-line: #dfe7e3;
    --ds-line-strong: #ccd8d3;
    --ds-primary: #0f766e;
    --ds-primary-hover: #0b625c;
    --ds-primary-soft: #e1f3ef;
    --ds-accent: #7057d9;
    --ds-danger: #c2414b;
    --ds-success: #2f7d4b;
    --ds-warning: #9a6716;
    --ds-shadow-sm: 0 1px 2px rgba(19, 41, 34, .04), 0 5px 16px rgba(19, 41, 34, .05);
    --ds-shadow-md: 0 16px 40px rgba(19, 41, 34, .10);
    --ds-radius-control: 10px;
    --ds-radius-card: 16px;
    --ds-radius-large: 22px;
    --ds-ease: 180ms cubic-bezier(.2, .8, .2, 1);
}

html {
    background: var(--ds-canvas);
    text-rendering: optimizeLegibility;
}

body {
    color: var(--ds-ink);
    font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

button,
a,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(112, 87, 217, .30) !important;
    outline-offset: 2px;
}

::selection {
    color: var(--ds-ink);
    background: #c9eee7;
}

* {
    scrollbar-color: #a9bbb4 transparent;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #a9bbb4;
    background-clip: padding-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

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