:root {
    --ys2-bg: #f4f5f7;
    --ys2-surface: #fff;
    --ys2-text: #191d27;
    --ys2-muted: #626975;
    --ys2-line: #dce0e6;
    --ys2-accent: #c83f2d;
    --ys2-accent-soft: #fce7e3;
    --ys2-topbar: 76px;
    --ys2-sidebar: 216px;
    --ys2-max: 1760px;
    --ys2-radius: 12px;
    --ys2-shadow: 0 10px 30px rgba(24, 29, 39, .06);
    font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    color: var(--ys2-text);
    background: var(--ys2-bg)
}

html.ys-dark {
    --ys2-bg: #111318;
    --ys2-surface: #1a1e25;
    --ys2-text: #f2f3f5;
    --ys2-muted: #a9afba;
    --ys2-line: #303640;
    --ys2-accent: #c83f2d;
    --ys2-accent-soft: #382725;
    --ys2-shadow: 0 10px 30px rgba(0, 0, 0, .28)
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--ys2-bg);
    color: var(--ys2-text)
}

a {
    color: inherit;
    text-decoration: none
}

button,
input {
    font: inherit
}

img {
    max-width: 100%
}

.ys2-theme-toggle {
    align-items: center;
    background: var(--ys2-surface);
    border: 1px solid var(--ys2-line);
    border-radius: 50%;
    color: var(--ys2-text);
    cursor: pointer;
    display: flex;
    height: 38px;
    justify-content: center;
    width: 38px
}

.ys2-theme-toggle:focus-visible {
    outline: 2px solid var(--ys2-accent);
    outline-offset: 2px
}

html.ys-dark .ys2-topbar,
html.ys-dark .ys2-sidebar,
html.ys-dark .ys2-footer,
html.ys-dark .ys2-sidebar-toggle {
    background: var(--ys2-surface)
}

html.ys-dark .ys2-search {
    background: #232832;
    border-color: var(--ys2-line)
}

html.ys-dark .ys2-sidebar-toggle span {
    background: var(--ys2-muted)
}


html.ys-dark .ys2-theme-toggle:focus-visible {
    outline: 2px solid var(--ys2-text);
}