/* Shared semantic palette. Components use these roles, never separate theme layouts. */
:root, :root[data-theme="light"] {
    color-scheme: light;
    --bg-color: #f8fafb;
    --text-color: #283846;
    --heading-color: #192c3b;
    --secondary-text-color: #5b6b78;
    --primary-color: #36536b;
    --primary-color-rgb: 54, 83, 107;
    --secondary-color: #eef2f5;
    --feature-item-bg: #ffffff;
    --border-color: #d5dfe6;
    --control-border-color: #a7b8c5;
    --link-color: #315c7b;
    --link-hover-color: #1e3e57;
    --focus-ring-color: #3576a5;
    --cta-bg-color: #304b61;
    --cta-text-color: #ffffff;
    --cta-bg-hover-color: #233e52;
    --cta-bg-active-color: #1d3446;
    --button-hover-bg-color: #e1e9ef;
    --foreground-rgb: 31, 49, 64;
    --surface-rgb: 255, 255, 255;
    --page-rgb: 248, 250, 251;
    --shadow-rgb: 30, 49, 67;
    --success-color: #197049;
    --warning-color: #866016;
    --danger-color: #b43d49;
    --danger-surface: #fbecee;
    --info-color: #315f86;
    --muted-color: #637684;
    --card-blue: #edf3f9;
    --card-sage: #eef4ef;
    --card-sand: #f5f1e8;
    --annotation-fill: rgba(54, 83, 107, .045);
    --annotation-stroke: #738b9e;
    --toolbar-bg: #ffffff;
    --toolbar-group-bg: #eef3f7;
    --logo-filter: brightness(.3);
    --toolbar-icon-filter: brightness(.42);
    --pixel-field-filter: invert(1);
    --pixel-field-blend: multiply;
    --pixel-field-opacity: .32;
    --desktop-wallpaper-overlay: linear-gradient(transparent, transparent);
    --desktop-taskbar-bg: rgba(246, 249, 252, .96);
    --desktop-taskbar-ink: #314863;
    --desktop-shortcut-shadow: 0 1px 2px #ffffffd9;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-color: #111213;
    --text-color: #eceeef;
    --heading-color: #f3f4f5;
    --secondary-text-color: #aeb3b7;
    --primary-color: #d6d9dc;
    --primary-color-rgb: 214, 217, 220;
    --secondary-color: #191b1d;
    --feature-item-bg: #222527;
    --border-color: #3c4043;
    --control-border-color: #70777d;
    --link-color: #d6d9dc;
    --link-hover-color: #ffffff;
    --focus-ring-color: #eef0f2;
    --cta-bg-color: #d6d9dc;
    --cta-text-color: #151719;
    --cta-bg-hover-color: #f3f4f5;
    --cta-bg-active-color: #b9bec3;
    --button-hover-bg-color: #303437;
    --foreground-rgb: 236, 241, 247;
    --surface-rgb: 25, 27, 29;
    --page-rgb: 13, 15, 18;
    --shadow-rgb: 0, 0, 0;
    --success-color: #81e6bd;
    --warning-color: #fde68a;
    --danger-color: #fca5a5;
    --danger-surface: #7f1d1d;
    --info-color: #9fc8e8;
    --muted-color: #94a3b8;
    --card-blue: #1d252d;
    --card-sage: #202824;
    --card-sand: #29261f;
    --annotation-fill: rgba(0, 0, 0, .22);
    --annotation-stroke: #8a8a8a;
    --toolbar-bg: #202020;
    --toolbar-group-bg: #292929;
    --logo-filter: none;
    --toolbar-icon-filter: none;
    --pixel-field-filter: none;
    --pixel-field-blend: normal;
    --pixel-field-opacity: 1;
    --desktop-wallpaper-overlay: linear-gradient(rgba(8, 12, 17, .42), rgba(8, 12, 17, .56));
    --desktop-taskbar-bg: rgba(18, 21, 26, .96);
    --desktop-taskbar-ink: #f3f4f6;
    --desktop-shortcut-shadow: 1px 1px 2px #000, 0 1px 3px #000;
}

:root {
    --section-bg-alternate: var(--secondary-color);
    --feature-item-shadow: rgba(var(--shadow-rgb), .08);
    --feature-item-shadow-hover: rgba(var(--shadow-rgb), .16);
    --feature-item-border-hover: var(--control-border-color);
    --feature-icon-color: var(--primary-color);
    --feature-heading-color: var(--heading-color);
    --code-bg-color: var(--secondary-color);
    --code-text-color: var(--text-color);
    --code-border-color: var(--border-color);
    --doc-sidebar-bg: var(--secondary-color);
    --doc-sidebar-border: var(--border-color);
    --doc-sidebar-link-color: var(--secondary-text-color);
    --doc-sidebar-link-hover-bg: var(--button-hover-bg-color);
    --doc-sidebar-link-active-bg: var(--cta-bg-color);
    --doc-sidebar-link-active-color: var(--cta-text-color);
    --doc-submenu-link-color: var(--secondary-text-color);
    --doc-submenu-link-hover-color: var(--link-hover-color);
    --doc-content-border: var(--border-color);
    --blockquote-bg: var(--secondary-color);
    --blockquote-border: var(--control-border-color);
    --blockquote-text-color: var(--text-color);
    --table-border-color: var(--border-color);
    --table-header-bg: var(--secondary-color);
    --table-row-even-bg: var(--secondary-color);
    --mobile-menu-toggle-color: var(--text-color);
    --icon-color: var(--text-color);
    --footer-bg: var(--secondary-color);
    --header-border-color: var(--border-color);
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: var(--primary-color-rgb);
    --bs-body-color: var(--text-color);
    --bs-body-bg: var(--bg-color);
    --bs-secondary-color: var(--secondary-text-color);
    --bs-secondary-bg: var(--secondary-color);
    --bs-tertiary-bg: var(--feature-item-bg);
    --bs-emphasis-color: var(--heading-color);
    --bs-border-color: var(--border-color);
    --bs-link-color: var(--link-color);
    --bs-link-hover-color: var(--link-hover-color);
    --bs-link-color-rgb: var(--primary-color-rgb);
    --bs-link-hover-color-rgb: var(--primary-color-rgb);
    --bs-light-rgb: var(--surface-rgb);
    --bs-dark-rgb: var(--foreground-rgb);
}

/* The same control is used by the header, account forms and administration. */
.theme-toggle {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 34px; height: 34px; padding: 7px; border: 1px solid var(--control-border-color);
    border-radius: 6px; color: var(--text-color); background: var(--feature-item-bg);
    cursor: pointer; vertical-align: middle;
}
.theme-toggle:hover { background: var(--button-hover-bg-color); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 3px; }
.theme-toggle svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle [data-theme-icon="sun"] { display: none; }
:root[data-theme="dark"] .theme-toggle [data-theme-icon="sun"] { display: block; }
:root[data-theme="dark"] .theme-toggle [data-theme-icon="moon"] { display: none; }
.auth-theme-switcher { position: fixed; top: 20px; right: 20px; z-index: 10; }
.logo img, .mobile-menu__logo-img, .logo-image { filter: var(--logo-filter); }