html[data-ws-theme="pico"] {
    color-scheme: light;
    --ws-font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ws-font-size: 1rem;

    --ws-bg: #ffffff;
    --ws-surface: #ffffff;
    --ws-surface-2: #f4f5f6;
    --ws-surface-3: #e8eaed;
    --ws-overlay: rgba(17,24,39,.24);

    --ws-text: #373c44;
    --ws-text-muted: #646b79;
    --ws-link: #0172ad;
    --ws-primary: #0172ad;
    --ws-primary-hover: #015887;
    --ws-primary-text: #ffffff;

    --ws-border: #cfd5dd;
    --ws-border-strong: #aeb7c2;
    --ws-input-bg: #ffffff;
    --ws-input-text: #373c44;
    --ws-control-bg: #ffffff;
    --ws-control-hover: #f4f5f6;
    --ws-control-active: #e8eaed;
    --ws-focus: rgba(1,114,173,.22);

    --ws-radius: .25rem;
    --ws-radius-lg: .5rem;
    --ws-shadow: 0 .125rem 1rem rgba(27,40,50,.10);
    --ws-shadow-soft: 0 .125rem .5rem rgba(27,40,50,.08);
    --ws-inset-shadow: none;

    --ws-titlebar-bg: #ffffff;
    --ws-titlebar-text: #373c44;
    --ws-titlebar-inactive: #f4f5f6;

    --ws-sidebar-bg: #ffffff;
    --ws-sidebar-text: #373c44;
    --ws-sidebar-link: #373c44;
    --ws-sidebar-link-hover: #f4f5f6;
    --ws-sidebar-link-active: #0172ad;
    --ws-sidebar-link-active-text: #fff;
    --ws-topbar-bg: #ffffff;
    --ws-topbar-border: #cfd5dd;
}

html[data-ws-theme="pico-dark"] {
    color-scheme: dark;
    --ws-font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ws-font-size: 1rem;

    --ws-bg: #13171f;
    --ws-surface: #1b2028;
    --ws-surface-2: #202632;
    --ws-surface-3: #2b3240;
    --ws-overlay: rgba(0,0,0,.52);

    --ws-text: #c2c7d0;
    --ws-text-muted: #8f98a8;
    --ws-link: #01aaff;
    --ws-primary: #01aaff;
    --ws-primary-hover: #38baff;
    --ws-primary-text: #071218;

    --ws-border: #3a4250;
    --ws-border-strong: #4d5666;
    --ws-input-bg: #202632;
    --ws-input-text: #e7e9ed;
    --ws-control-bg: #202632;
    --ws-control-hover: #2b3240;
    --ws-control-active: #343d4d;
    --ws-focus: rgba(1,170,255,.24);

    --ws-radius: .25rem;
    --ws-radius-lg: .5rem;
    --ws-shadow: 0 .125rem 1rem rgba(0,0,0,.34);
    --ws-shadow-soft: 0 .125rem .5rem rgba(0,0,0,.28);
    --ws-inset-shadow: none;

    --ws-titlebar-bg: #1b2028;
    --ws-titlebar-text: #e7e9ed;
    --ws-titlebar-inactive: #202632;

    --ws-sidebar-bg: #1b2028;
    --ws-sidebar-text: #e7e9ed;
    --ws-sidebar-link: #e7e9ed;
    --ws-sidebar-link-hover: #2b3240;
    --ws-sidebar-link-active: #01aaff;
    --ws-sidebar-link-active-text: #071218;
    --ws-topbar-bg: #1b2028;
    --ws-topbar-border: #3a4250;
}