[data-theme="dark"] {
  color-scheme: dark;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.3);

  --color-bg: #09131d;
  --color-bg-soft: #0d1824;
  --color-surface: #101c29;
  --color-surface-2: #152230;
  --color-surface-3: #1a2a39;
  --color-surface-contrast: #111827;
  --color-text: #eef6ff;
  --color-text-soft: #c8d8ea;
  --color-text-muted: #95a8bc;
  --color-text-inverse: #f7fbff;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-link: #7db5ff;
  --color-link-hover: #a9ceff;
  --color-primary: #5b95e2;
  --color-primary-hover: #72a7ec;
  --color-primary-active: #4d84cd;
  --color-success: #57b37d;
  --color-success-soft: rgba(87, 179, 125, 0.18);
  --color-warning: #e3ad56;
  --color-warning-soft: rgba(227, 173, 86, 0.18);
  --color-danger: #ef6a72;
  --color-danger-soft: rgba(239, 106, 114, 0.18);
  --color-info: #7db5ff;
  --color-info-soft: rgba(125, 181, 255, 0.18);

  --page-bg:
    radial-gradient(circle at top left, rgba(91, 149, 226, 0.24), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(239, 106, 114, 0.16), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(125, 181, 255, 0.14), transparent 30%),
    linear-gradient(160deg, #09131d 0%, #0f1b28 42%, #111c29 100%);
  --page-orb-top: rgba(91, 149, 226, 0.22);
  --page-orb-bottom: rgba(239, 106, 114, 0.14);

  --surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  --surface-panel-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  --surface-field: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  --surface-sidebar: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  --surface-sidebar-group: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  --surface-overlay: rgba(255, 255, 255, 0.05);
  --surface-code: linear-gradient(180deg, rgba(19, 30, 43, 0.92), rgba(14, 24, 36, 0.94));

  --text-strong: var(--color-text);
  --text-soft: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.66);
  --text-faint: rgba(255, 255, 255, 0.54);

  --focus-ring: 0 0 0 3px rgba(91, 149, 226, 0.28);
  --focus-outline-color: rgba(91, 149, 226, 0.62);
  --panel-border: rgba(255, 255, 255, 0.12);
  --panel-border-strong: rgba(255, 255, 255, 0.2);
  --field-border: rgba(255, 255, 255, 0.12);
  --field-border-focus: rgba(91, 149, 226, 0.34);
  --panel-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  --button-primary-bg: linear-gradient(180deg, #72a7ec, #5b95e2);
  --button-primary-bg-hover: linear-gradient(180deg, #87b5f2, #4d84cd);
  --button-primary-border: rgba(91, 149, 226, 0.66);
  --button-primary-text: #f7fbff;
  --button-secondary-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
  --button-secondary-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.12));
  --button-secondary-border: rgba(255, 255, 255, 0.14);
  --button-secondary-text: #eef6ff;

  --nav-item-bg-hover: linear-gradient(180deg, rgba(91, 149, 226, 0.14), rgba(239, 106, 114, 0.06));
  --nav-item-bg-active: linear-gradient(180deg, rgba(91, 149, 226, 0.2), rgba(239, 106, 114, 0.08));
  --nav-item-border-active: rgba(91, 149, 226, 0.32);

  --backdrop-color: rgba(7, 10, 11, 0.6);
}

[data-theme="dark"] .theme-toggle-button.active {
  box-shadow: 0 6px 14px rgba(91, 149, 226, 0.18);
}

[data-theme="dark"] .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 22px rgba(91, 149, 226, 0.24);
}

[data-theme="dark"] .subtask-toggle,
[data-theme="dark"] .compact-empty,
[data-theme="dark"] .comparison-panel {
  background: rgba(255, 255, 255, 0.04);
}