:root[data-theme] {
    --brand: #1f6fd5;
    --button-bg: #1f6fd5;
    --button-hover-bg: #1b65c6;
    --on-accent: #ffffff;
    --accent-border: #2478e5;
    --font-family-base: Arial, "Segoe UI", sans-serif;
    --text: var(--ink);
    --text-primary: var(--ink);
    --text-muted: var(--muted);
    --text-subtle: var(--muted-strong);
    --panel: var(--surface);
    --panel-strong: var(--surface-2);
    --panel-soft: var(--surface-2);
    --surface-bg: var(--surface);
    --border: var(--line);
    --panel-border: var(--line);
    --accent: var(--link);
    --accent-blue: var(--link);
    --gold: var(--muted-strong);
    --accent-gold: var(--muted-strong);
    --badge-bg: var(--surface-3);
    --selected-border: var(--accent-border);
    --row-selected-bg: var(--selected-background);
    --button-secondary-bg: var(--surface-2);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #181818;
    --surface: #202020;
    --surface-2: #252525;
    --surface-3: #303030;
    --sidebar-bg: #111111;
    --control-bg: #151515;
    --ink: #f3f4f6;
    --muted: #b4b4b4;
    --muted-strong: #d1d1d1;
    --text-soft: #999999;
    --line: #383838;
    --line-strong: #505050;
    --link: #69b3ff;
    --accent-hover: #9acbff;
    --selected-background: #242e3b;
    --soft: #282828;
    --row-hover-bg: #292929;
    --overlay-rgb: 255, 255, 255;
    --danger: #ffaaa3;
    --danger-bg: #3b2525;
    --success: #9ce4af;
    --success-bg: #23382a;
    --warning: #f4d17e;
    --warning-bg: #393222;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #f4f4f4;
    --surface-3: #e7e7e7;
    --sidebar-bg: #ececec;
    --control-bg: #ffffff;
    --ink: #202020;
    --muted: #565656;
    --muted-strong: #404040;
    --text-soft: #666666;
    --line: #d2d2d2;
    --line-strong: #aaaaaa;
    --link: #1265bd;
    --accent-hover: #084e9d;
    --selected-background: #eaf2ff;
    --soft: #f0f0f0;
    --row-hover-bg: #f0f0f0;
    --overlay-rgb: 0, 0, 0;
    --danger: #a32727;
    --danger-bg: #fff0ef;
    --success: #216333;
    --success-bg: #eaf7ee;
    --warning: #785300;
    --warning-bg: #fff7df;
}

html[data-theme] body {
    background: var(--bg);
    color: var(--ink);
}

html[data-theme] .sidebar,
html[data-theme] .left {
    background: var(--sidebar-bg);
    border-color: var(--line);
}

html[data-theme] .right,
html[data-theme] .panel,
html[data-theme] .rail-panel,
html[data-theme] .comm-shell,
html[data-theme] .comm-message-list,
html[data-theme] .direct-conversation-content {
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme] .communications-browser-sidebar,
html[data-theme] .direct-browser-list,
html[data-theme] .topic-browser-groups,
html[data-theme] .rich-toolbar {
    background: var(--surface-2);
    border-color: var(--line);
}

html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea,
html[data-theme] .rich-editor {
    color: var(--ink);
    background: var(--control-bg);
    border-color: var(--line-strong);
    accent-color: var(--button-bg);
}

html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder,
html[data-theme] .rich-editor:empty::before {
    color: var(--text-soft);
}

html[data-theme] a {
    color: var(--link);
}

html[data-theme] a:hover {
    color: var(--accent-hover);
}

html[data-theme] .nav a,
html[data-theme] .primary-nav a,
html[data-theme] .communications-tabs a,
html[data-theme] .direct-thread-row a,
html[data-theme] .direct-thread-row a strong,
html[data-theme] .topic-browser-topic {
    color: var(--ink);
}

html[data-theme] .nav a.active,
html[data-theme] .primary-nav a.active,
html[data-theme] .communications-tabs a.active,
html[data-theme] .direct-thread-row a.active,
html[data-theme] .topic-browser-topic.is-selected {
    color: var(--ink);
    background: var(--selected-background);
    border-color: var(--accent-border);
}

html[data-theme] button,
html[data-theme] .button,
html[data-theme] input[type="submit"],
html[data-theme] .composer-send {
    background: var(--button-bg);
    color: var(--on-accent);
}

html[data-theme] button:hover,
html[data-theme] .button:hover {
    background: var(--button-hover-bg);
    color: var(--on-accent);
}

html[data-theme] .button.ghost,
html[data-theme] button.ghost,
html[data-theme] .button.secondary,
html[data-theme] button.secondary,
html[data-theme] .composer-attach,
html[data-theme] .rich-toolbar button,
html[data-theme] .theme-toggle,
html[data-theme] .file-view-mode-button,
html[data-theme] .task-table th button,
html[data-theme] .work-item-table th button {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--line-strong);
}

html[data-theme] .rich-toolbar button:hover,
html[data-theme] .button.ghost:hover,
html[data-theme] .theme-toggle:hover {
    background: var(--selected-background);
    color: var(--ink);
    border-color: var(--accent-border);
}

html[data-theme] .role-badge,
html[data-theme] .direct-thread-kind,
html[data-theme] .comm-chip,
html[data-theme] .comm-chip-group > span {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--surface-3);
}

html[data-theme] .unread-badge,
html[data-theme] .new-badge,
html[data-theme] .unread-pill {
    color: var(--on-accent);
    background: var(--button-bg);
    border-color: var(--button-bg);
}

html[data-theme] .danger-button {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: var(--danger);
}

html[data-theme] .rail-resize-handle,
html[data-theme] .communications-sidebar-resize-handle {
    background: transparent;
}

html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] .brand,
html[data-theme] .user-card > strong,
html[data-theme] .brand-mark {
    color: var(--ink);
}

html[data-theme] .brand-subtitle,
html[data-theme] .page-head p {
    color: var(--muted);
}

html[data-theme] .content,
html[data-theme] .main {
    background: var(--bg);
}

html[data-theme] .inline-edit-trigger,
html[data-theme] .work-item-sort-button,
html[data-theme] .task-table th button,
html[data-theme] .work-item-table th button {
    background: transparent;
    color: inherit;
}

html[data-theme] .inline-edit-trigger:hover,
html[data-theme] .work-item-sort-button:hover {
    background: var(--selected-background);
    color: var(--ink);
}

html[data-theme] button:disabled,
html[data-theme] .button[aria-disabled="true"] {
    background: var(--surface-3);
    color: var(--muted);
    opacity: 1;
}

html[data-theme] .rail-resize-handle::after,
html[data-theme] .communications-sidebar-resize-handle::after {
    background: var(--line-strong);
}

html[data-theme] :focus-visible {
    outline-color: var(--accent-border);
}

html[data-theme] .dependency-connector-layer marker path {
    fill: var(--link);
}

html[data-theme] .show-critical-path .dependency-connector {
    filter: none;
}

.theme-toggle-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.theme-toggle {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 32px;
}

[data-theme-icon] {
    display: inline-block;
    width: 18px;
    text-align: center;
    font-size: 18px;
}

.theme-toggle-status {
    font-size: var(--font-size-xs);
    color: var(--muted);
}

.theme-settings-form {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
    justify-items: start;
}

.theme-settings-form fieldset {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
}

.theme-options {
    display: flex;
    gap: 20px;
}

.theme-options label {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.theme-options input {
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
}