/* Theme tokens — one declaration per variable via light-dark().
   System preference: html { color-scheme: light dark } lets light-dark() follow OS.
   Manual override: setScheme() sets user-scheme="light"|"dark", which pins color-scheme. */

html {
    color-scheme: light dark;

    --bg-color: light-dark(white, #002000);
    --bars-bg-color: light-dark(#bbb, #004000);
    --font-color: light-dark(black, #F8F8F2);
    --header-font-color: light-dark(black, white);
    --zebra-bg-color: light-dark(#aaa, #444);
    --content-bg-color: light-dark(#ddd, #222);
    --content-font-color: light-dark(black, white);
    --example-bg-color: light-dark(#fed, #343434);
    --example-keyword-color: light-dark(blue, lightblue);
    --link-font-color: light-dark(blue, #0ad);
    --active-font-color: light-dark(#0cc, #068);
    --about-font-color: light-dark(#888, #4e5044);
    --menu-bg-color: light-dark(#ddd, #222);
    --control-bg-color: light-dark(#ccc, #444);
    --message-box-bg-color: light-dark(lightblue, darkblue);
    --message-box-font-color: light-dark(black, white);
    --currency-color: light-dark(black, white);
    --gold: light-dark(#ffd66b, #736031);
    --gold-hot: light-dark(#ffb300, #533a00);
    --chat-bubble-outgoing-bg: light-dark(#007aff, #0a84ff);
    --chat-bubble-outgoing-color: #fff;
    --chat-bubble-incoming-bg: light-dark(#e5e5ea, #3a3a3c);
    --chat-bubble-incoming-color: light-dark(#000, #f2f2f7);
    --chat-bubble-system-bg: light-dark(rgba(255, 48, 48, 0.15), rgba(255, 80, 80, 0.2));
    --chat-bubble-system-color: inherit;
    --chat-read-color: light-dark(#34c759, #30d158);
    --chat-typing-color: light-dark(#888, #aaa);
}

/* Logo image URLs must stay plain url() — content: var(--small-logo) cannot use light-dark() */
@media (prefers-color-scheme: light) {
    html:not([user-scheme]) {
        --small-logo: url('/static/darkicon.png');
    }
}

@media (prefers-color-scheme: dark) {
    html:not([user-scheme]) {
        --small-logo: url('/static/lighticon.png');
    }
}

html[user-scheme="light"] {
    color-scheme: light;
    --small-logo: url('/static/darkicon.png');
}

html[user-scheme="dark"] {
    color-scheme: dark;
    --small-logo: url('/static/lighticon.png');
}