/* Neutral anthracite, including the supplied logo. */
:root{--text:#303034}
body.dark{--bg:#222226;--side:#252529;--panel:#29292d;--chrome:#29292d;--field:#323237;--hover:#3a3a40;--text:#ededf0;--muted:#b2b2ba;--line:#414148;--folder:#a4a4ac;--stripe:#2c2c31}
body.dark .contenthub-logo{filter:brightness(0) invert(.93)}
html[data-appearance=system] .theme-switch [data-resolved=true]{box-shadow:inset 0 -2px var(--accent)}
@media(prefers-color-scheme:dark){
 html:not([data-appearance=light]):not([data-appearance=dark]) body{--bg:#222226;--side:#252529;--panel:#29292d;--chrome:#29292d;--field:#323237;--hover:#3a3a40;--text:#ededf0;--muted:#b2b2ba;--line:#414148;--folder:#a4a4ac;--stripe:#2c2c31}
 html:not([data-appearance=light]):not([data-appearance=dark]) .contenthub-logo{filter:brightness(0) invert(.93)}
}

/* Three equal segments; the old motion layer assumed only light/dark. */
.theme-switch{width:150px}
.theme-switch button{flex:1;min-width:0;padding-inline:5px}
.theme-switch:before{width:calc((100% - 4px)/3);transform:translateX(0)}
.theme-switch:has([data-theme=light][aria-pressed=true]):before{transform:translateX(100%)}
.theme-switch:has([data-theme=dark][aria-pressed=true]):before{transform:translateX(200%)}