html[data-theme="dark"],
html:not([data-theme]) {
  color-scheme: dark;
  --bg-app: #12161d;
  --bg-surface: #1b2330;
  --bg-surface-alt: #171f2b;
  --bg-surface-raised: #141a23;
  --bg-surface-muted: #1e2836;
  --bg-header: #202a38;
  --bg-hover: #263245;
  --bg-hover-subtle: #253043;
  --bg-active: #2f4158;
  --bg-active-alt: #243041;
  --bg-option-highlight: #2f3d52;
  --bg-pinned: #2a3548;
  --bg-pinned-hover: #36465d;
  --bg-pinned-sticky-hover: #3b4d67;
  --bg-join-inactive: #2a3444;
  --bg-scrollbar-track: #1b2330;
  --bg-scrollbar-thumb: #4a5a6e;
  --bg-scrollbar-thumb-hover: #5d7189;
  --bg-overlay: rgba(0, 0, 0, 0.55);
  --bg-error-subtle: rgba(240, 112, 112, 0.04);
  --bg-focus-subtle: rgba(90, 122, 158, 0.08);
  --bg-accent-subtle: rgba(240, 192, 64, 0.06);
  --bg-accent-subtle-strong: rgba(240, 192, 64, 0.1);
  --bg-accent-subtle-medium: rgba(240, 192, 64, 0.08);
  --text-primary: #e8edf2;
  --text-secondary: #c9d2dd;
  --text-muted: #9fb0c5;
  --text-subtle: #b1bcc9;
  --text-handle: #6d8098;
  --text-join: #b8c8dc;
  --text-inverse: #ffffff;
  --text-pin-hover: #d4deea;
  --border-default: #2d3848;
  --border-strong: #344252;
  --border-input: #3f4d5f;
  --border-group: #3a4658;
  --border-checkbox: #4a5d78;
  --border-focus: #5a7a9e;
  --border-pinned: #5d7189;
  --border-pinned-emphasis: #6a839f;
  --border-accent: #f0c040;
  --border-accent-dim: rgba(240, 192, 64, 0.5);
  --border-accent-dim-strong: rgba(240, 192, 64, 0.55);
  --accent: #f0c040;
  --accent-hover: #f5d060;
  --accent-calc: #f0a030;
  --error: #f07070;
  --checkbox: #3b82f6;
  --checkmark: #ffffff;
  --shadow-dropdown: 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-dialog: 0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-header: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-sticky: 2px 0 4px rgba(0, 0, 0, 0.28);
  --shadow-drawer: 0 -2px 0 var(--bg-active-alt), 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-error: 0 0 0 1px rgba(240, 112, 112, 0.35);
  --shadow-option: inset 0 0 0 1px var(--accent);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-app: #eef1f5;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f8fafc;
  --bg-surface-raised: #f3f6f9;
  --bg-surface-muted: #e8edf2;
  --bg-header: #dfe6ee;
  --bg-hover: #e4eaf2;
  --bg-hover-subtle: #e8edf0;
  --bg-active: #cdd9e8;
  --bg-active-alt: #d8e2ee;
  --bg-option-highlight: #c8d6e6;
  --bg-pinned: #d4deea;
  --bg-pinned-hover: #c5d4e4;
  --bg-pinned-sticky-hover: #b0c0d4;
  --bg-join-inactive: #e0e6ee;
  --bg-scrollbar-track: #e8edf2;
  --bg-scrollbar-thumb: #a8b4c4;
  --bg-scrollbar-thumb-hover: #8a97a8;
  --bg-overlay: rgba(15, 23, 42, 0.35);
  --bg-error-subtle: rgba(220, 80, 80, 0.06);
  --bg-focus-subtle: rgba(74, 122, 176, 0.1);
  --bg-accent-subtle: rgba(200, 140, 20, 0.08);
  --bg-accent-subtle-strong: rgba(200, 140, 20, 0.14);
  --bg-accent-subtle-medium: rgba(200, 140, 20, 0.1);
  --text-primary: #1a2332;
  --text-secondary: #3d4d63;
  --text-muted: #5c6b7f;
  --text-subtle: #4a5969;
  --text-handle: #7a8799;
  --text-join: #4a5d75;
  --text-inverse: #ffffff;
  --text-pin-hover: #2a3848;
  --border-default: #c8d2de;
  --border-strong: #b8c5d4;
  --border-input: #aab6c5;
  --border-group: #b0bcc9;
  --border-checkbox: #8a97a8;
  --border-focus: #4a7ab0;
  --border-pinned: #7a91ad;
  --border-pinned-emphasis: #8aa0b8;
  --border-accent: #f5b030;
  --border-accent-dim: rgba(200, 140, 20, 0.45);
  --border-accent-dim-strong: rgba(200, 140, 20, 0.55);
  --accent: #f5b030;
  --accent-hover: #a87310;
  --accent-calc: #f5b030;
  --error: #c44a4a;
  --checkbox: #2563eb;
  --checkmark: #ffffff;
  --shadow-dropdown: 0 8px 20px rgba(15, 23, 42, 0.12);
  --shadow-dialog: 0 16px 48px rgba(15, 23, 42, 0.16);
  --shadow-header: 0 2px 6px rgba(15, 23, 42, 0.08);
  --shadow-sticky: 2px 0 4px rgba(15, 23, 42, 0.08);
  --shadow-drawer: 0 -2px 0 var(--bg-active-alt), 0 2px 6px rgba(15, 23, 42, 0.1);
  --shadow-error: 0 0 0 1px rgba(196, 74, 74, 0.35);
  --shadow-option: inset 0 0 0 1px var(--accent);
}