:root {
    color-scheme: light;
    --background: #ffffff;
    --surface: #f5f5f7;
    --text: #1d1d1f;
    --muted: #626267;
    --border: #dedee3;
    --button: #1d1d1f;
    --button-text: #ffffff;
    --radius: 16px;
    --width: 1160px;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #080808;
    --surface: #151515;
    --text: #f5f5f7;
    --muted: #a3a3a8;
    --border: #303033;
    --button: #f5f5f7;
    --button-text: #080808;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --background: #080808;
        --surface: #151515;
        --text: #f5f5f7;
        --muted: #a3a3a8;
        --border: #303033;
        --button: #f5f5f7;
        --button-text: #080808;
    }
}