/* Semantic additions also give old utility color aliases a defined value. */
:root
{
    --theme-muted: #555;
    --theme-accent-text: #075f99;
    --background-low: var(--input-background-normal);
    --background-mid: var(--dialog-background-normal);
    --background-high: var(--page-background-normal);
    --border-mid: var(--input-border-normal);
    --border-high: var(--dialog-border-highlight);
    --color-low: var(--theme-muted);
    --color-mid: var(--body-color-normal);
    --color-high: var(--body-color-normal);
}
#account-theme { padding: 12px; text-align: left; }
#account-theme h2 { font-size: 22px; margin-bottom: 12px; }
#account-theme p { font: 14px/1.5 Arial, sans-serif; margin: 10px 0; }
#account-theme [data-theme-choices] { display: grid; gap: 8px; }
#account-theme button
{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px;
    border: 1px solid var(--dialog-border-fade);
    border-radius: 8px;
    background: var(--dialog-background-highlight);
    color: var(--dialog-color-normal);
    font: 15px/1.4 Arial, sans-serif;
    text-align: left;
    cursor: pointer;
}
#account-theme button[aria-pressed="true"] { border: 2px solid var(--dialog-border-highlight); }
#account-theme button:focus-visible { outline: 2px solid var(--theme-accent-text); outline-offset: 2px; }
.theme-swatches { display: flex; flex-shrink: 0; }
.theme-swatches > span { width: 18px; height: 24px; border: 1px solid var(--dialog-border-fade); }
.theme-actions { display: flex; gap: 8px; margin-top: 16px; }
#account-theme .theme-actions button { justify-content: center; }
html[data-theme] ::-webkit-scrollbar-track { background: var(--dialog-background-normal); }
html[data-theme] ::-webkit-scrollbar-thumb { background: var(--theme-muted); }
/* Native controls in lightweight panels must inherit theme colors too. */
#dock-left-printers input, #dock-left-printers button, .rich-image-picker input, .rich-image-picker button
{
    background: var(--input-background-normal);
    color: var(--input-color-normal);
    border-color: var(--input-border-normal);
}

/* Intro scenes use the dark highlight surface, even in pastel presets. */
html[data-theme]:not([data-theme="normal"]) #scene1 :is(h1, h2, h3)
{
    color: var(--body-color-highlight);
}