/* 🌙 Dark Mode Theme */
[data-theme="dark"] {
  --surface-primary: #0f0f0f;
  --text-primary: #f5f5f5;
  --text-secondary: #a0a0a0;
  --interactive-primary: #38bdf8;
  --gray-50: #1a1a1a;
  --gray-100: #242424;
  --gray-200: #2e2e2e;
  --gray-300: #404040;
  --gray-400: #666;
  --gray-500: #888;
  --gray-600: #aaa;
  --gray-700: #ccc;
  --gray-800: #1a1a1a;
  --gray-900: #f5f5f5;
  --node-bg: #1e1e1e;
  --node-text: #e8e8e8;
  --brand-50: #0c2d4a;
  --brand-100: #0d3a5c;
  --brand-200: #0f4a73;
  --brand-300: #38bdf8;
  --brand-400: #7dd3fc;
  --brand-500: #38bdf8;
  --brand-500-rgb: 56, 189, 248;
  --error-50: #2a1515;
  --error-100: #3d1c1c;
  --error-400: #f87171;
  --error-500: #ef4444;
}

/* 🌙 Dark Mode - Base Elements */
[data-theme="dark"] body {
  background: var(--surface-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .container {
  background: var(--surface-primary);
}

[data-theme="dark"] .roadmap-container {
  background: var(--surface-primary);
}

/* 🌙 Dark Mode - Node Styles */
[data-theme="dark"] .node-content {
  background: var(--node-bg);
  border-color: var(--gray-300);
  color: var(--node-text);
}

[data-theme="dark"] .node-content:hover {
  border-color: var(--brand-300);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .node-title {
  color: var(--text-primary);
}

[data-theme="dark"] .node-emoji-button {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

[data-theme="dark"] .node-emoji-button:hover {
  border-color: var(--brand-300);
}

[data-theme="dark"] .node-control-btn {
  background: var(--gray-200);
  border-color: var(--gray-300);
  color: var(--gray-600);
}

[data-theme="dark"] .node-control-btn:hover {
  background: var(--gray-300);
  color: var(--brand-300);
  border-color: var(--brand-300);
}

[data-theme="dark"] .node-control-btn.delete-btn:hover {
  background: var(--error-100);
  color: var(--error-400);
  border-color: var(--error-400);
}

[data-theme="dark"] .node-folded-preview {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

[data-theme="dark"] .node-folded-preview::before {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

[data-theme="dark"] .node-folded-preview-item:hover {
  background: var(--gray-200);
}

/* 🌙 Dark Mode - Detail Panel */
[data-theme="dark"] .detail-panel {
  background: var(--gray-100);
  color: var(--text-primary);
  border-color: var(--gray-300);
}

[data-theme="dark"] .detail-panel-header {
  border-color: var(--gray-300);
}

[data-theme="dark"] .detail-panel-section {
  background: var(--gray-200);
  border-color: var(--gray-300);
}

[data-theme="dark"] .panel-header-actions button,
[data-theme="dark"] .section-actions button,
[data-theme="dark"] .item-actions button {
  background: var(--gray-200);
  border-color: var(--gray-300);
  color: var(--text-secondary);
}

[data-theme="dark"] .panel-primary-action {
  background: var(--brand-100);
  border-color: var(--brand-300);
  color: var(--brand-300);
}

[data-theme="dark"] .panel-header-actions button:hover,
[data-theme="dark"] .section-actions button:hover,
[data-theme="dark"] .item-actions button:hover {
  background: var(--gray-300);
  border-color: var(--brand-300);
  color: var(--brand-300);
}

[data-theme="dark"] .panel-primary-action:hover {
  background: var(--brand-200);
  border-color: var(--brand-300);
  color: var(--brand-400);
}

[data-theme="dark"] .panel-header-actions button:disabled,
[data-theme="dark"] .panel-primary-action:disabled,
[data-theme="dark"] .section-actions button:disabled {
  background: var(--gray-200);
  border-color: var(--gray-300);
  color: var(--gray-500);
}

[data-theme="dark"] .section-loading-label {
  color: var(--gray-600);
}

[data-theme="dark"] .skeleton-line {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 50%, var(--gray-200) 75%);
}

[data-theme="dark"] .status-select {
  background: var(--gray-200);
  color: var(--text-primary);
  border-color: var(--gray-300);
}

/* 🌙 Dark Mode - Settings Panel */
[data-theme="dark"] .quick-help {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

[data-theme="dark"] .settings-panel,
[data-theme="dark"] #aiSettingsPanel {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

[data-theme="dark"] .settings-group {
  background: var(--gray-200);
  border-color: var(--gray-300);
}

[data-theme="dark"] .settings-group-title {
  color: var(--gray-600);
}

[data-theme="dark"] .settings-group-toggle {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-group-toggle:hover {
  background: var(--gray-300);
}

[data-theme="dark"] .settings-group-toggle-icon {
  color: var(--gray-600);
}

[data-theme="dark"] .settings-input,
[data-theme="dark"] .settings-slider {
  background: var(--gray-200);
  color: var(--text-primary);
  border-color: var(--gray-300);
}

[data-theme="dark"] .settings-input:focus,
[data-theme="dark"] .settings-slider:focus {
  border-color: var(--brand-300);
  outline-color: var(--brand-300);
}

[data-theme="dark"] .settings-value {
  color: var(--gray-600);
}

[data-theme="dark"] .settings-toggle span {
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-model-chip {
  background: var(--gray-300);
  border-color: var(--gray-400);
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-model-chip.ok {
  background: var(--brand-100);
  border-color: var(--brand-300);
  color: var(--brand-300);
}

[data-theme="dark"] .settings-model-chip.warn {
  background: var(--error-100);
  border-color: var(--error-400);
  color: var(--error-400);
}

[data-theme="dark"] .settings-model-chip.info {
  background: var(--gray-200);
  border-color: var(--gray-300);
  color: var(--gray-600);
}

[data-theme="dark"] .settings-provider-status {
  color: var(--gray-600);
}

[data-theme="dark"] .settings-provider-status.warn {
  color: var(--error-400);
}

[data-theme="dark"] .settings-hint {
  color: var(--gray-500);
}

[data-theme="dark"] .settings-reset {
  background: var(--gray-200);
  border-color: var(--gray-300);
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-reset:hover {
  background: var(--gray-300);
  color: var(--text-primary);
}

[data-theme="dark"] .settings-preset-btn {
  background: var(--gray-200);
  border-color: var(--gray-300);
  color: var(--text-secondary);
}

[data-theme="dark"] .settings-preset-btn:hover,
[data-theme="dark"] .settings-preset-btn.active {
  background: var(--brand-100);
  border-color: var(--brand-300);
  color: var(--brand-300);
}

/* 🌙 Dark Mode - Debug Panel */
[data-theme="dark"] .debug-panel {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--text-primary);
}

[data-theme="dark"] .debug-input {
  background: var(--gray-200);
  color: var(--text-primary);
  border-color: var(--gray-300);
}

[data-theme="dark"] .debug-log-entry {
  background: var(--gray-200);
  border-color: var(--gray-300);
}

[data-theme="dark"] .debug-metric-card {
  background: var(--gray-200);
  border-color: var(--gray-300);
}

[data-theme="dark"] .debug-section,
[data-theme="dark"] .debug-log-block {
  background: var(--gray-200);
  border-color: var(--gray-300);
}

[data-theme="dark"] .debug-log-block.raw {
  background: var(--gray-100);
}

[data-theme="dark"] .debug-tab {
  color: var(--text-secondary);
}

[data-theme="dark"] .debug-tab.active {
  color: var(--brand-300);
  border-color: var(--brand-300);
}

[data-theme="dark"] .debug-eval-row {
  background: var(--gray-200);
  border-color: var(--gray-300);
}

[data-theme="dark"] .debug-eval-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .debug-eval-badge.pass {
  background: var(--brand-100);
  color: var(--brand-300);
  border-color: var(--brand-300);
}

[data-theme="dark"] .debug-eval-badge.fail {
  background: var(--error-100);
  color: var(--error-400);
  border-color: var(--error-400);
}

[data-theme="dark"] .debug-eval-swatch {
  border-color: var(--gray-300);
}

/* 🌙 Dark Mode - Export Dialog */
[data-theme="dark"] .export-dropdown {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

[data-theme="dark"] .export-option {
  color: var(--text-primary);
}

[data-theme="dark"] .export-option:hover {
  background: var(--gray-200);
}

/* 🌙 Dark Mode - Import Dialog */
[data-theme="dark"] .import-dialog {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

[data-theme="dark"] .import-dropzone {
  background: var(--gray-200);
  border-color: var(--gray-400);
}

[data-theme="dark"] .import-dropzone:hover,
[data-theme="dark"] .import-dropzone.dragover {
  border-color: var(--brand-300);
  background: var(--brand-100);
}

[data-theme="dark"] .import-option {
  color: var(--text-secondary);
}

/* 🌙 Dark Mode - Initial Input */
[data-theme="dark"] .initial-input {
  background: var(--gray-100);
  color: var(--text-primary);
  border-color: var(--gray-300);
}

[data-theme="dark"] .initial-input::placeholder {
  color: var(--gray-500);
}

[data-theme="dark"] .initial-input:focus {
  border-color: var(--brand-300);
}

/* 🌙 Dark Mode - Empty Canvas */
[data-theme="dark"] .empty-canvas {
  color: var(--gray-500);
}

[data-theme="dark"] .empty-canvas h2,
[data-theme="dark"] .empty-canvas h3 {
  color: var(--text-secondary);
}

/* 🌙 Dark Mode - Notifications */
[data-theme="dark"] .notification {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--text-primary);
}

/* 🌙 Dark Mode - Buttons */
[data-theme="dark"] .settings-cog,
[data-theme="dark"] .export-button {
  background: var(--gray-100);
  color: var(--text-secondary);
  border-color: var(--gray-300);
}

[data-theme="dark"] .settings-cog:hover,
[data-theme="dark"] .export-button:hover {
  background: var(--gray-200);
  color: var(--text-primary);
}

/* 🌙 Dark Mode - Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--gray-100);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

/* 🌙 Dark Mode - Links (D3) */
[data-theme="dark"] .link {
  stroke: var(--gray-400);
}

/* 🌞 Light Mode Theme (Default) */
:root {
  --node-bg: var(--brand-50);
  --node-text: currentColor;
  --brand-500-rgb: 14, 165, 233;
}