:root {
  /* --bg: #f7f7f7; */
  --base: #ffffff;
  --bg: #efeeec;
  --text: #333230;
  --muted: #666563;

  /* --panel-bg: #fdfcfa; */
  --panel-bg: #F7F6F4;
  --panel-border: #dddcda;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

  --control-bg: #fff;
  --control-border: #cccbc9;
  --control-hover: #f1f0ef;

  --soft-bg: #faf9f7;
  --code-bg: #f1f0ef;

  --info-bg: #eef5fd;
  --info-border: #cfe2fd;
  --info-text: #184b8a;

  --success-bg: #eefaef;
  --success-border: #cceed3;
  --success-text: #1d6a31;

  --error-bg: #fff0ef;
  --error-border: #f0c9c8;
  --error-text: #9b1b1a;

  --error-line: rgba(255, 0, 0, 0.1);
  --error-char: rgba(255, 0, 0, 0.25);

  --tree-bg: #fff;
  --tree-empty: #777674;
  --tree-key: #7b1fa2;
  --tree-string: #1565c0;
  --tree-number: #2e7d32;
  --tree-boolean: #ef6c00;
  --tree-null: #757575;
  --tree-plain: #22211f;
  --tree-type: #888785;

  --search-match-bg: rgba(255, 235, 59, 0.32);
  --search-match-border: rgba(180, 140, 0, 0.35);
  --search-current-bg: rgba(255, 193, 7, 0.42);
  --search-current-border: rgba(180, 120, 0, 0.55);

  --stats-card-border: #e3e3e3;
  --stats-label: #666563;
  --stats-value: #11100f;

  --modal-overlay: rgba(0, 0, 0, 0.6);
  --modal-bg: #fff;

  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-soft: #ffedd5;
  --accent-border: #fdba74;

  --accent2: #3b82f6;

  --form-accent: var(--accent-border);
}

html[data-theme="dark"] {
  --base: #111111;
  --bg: #111418;
  --text: #e7eaf0;
  --muted: #b8c0cc;

  --panel-bg: #1b2129;
  --panel-border: #313b47;
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.28);

  --control-bg: #202833;
  --control-border: #3a4655;
  --control-hover: #293240;

  --soft-bg: #182029;
  --code-bg: #2a3340;

  --info-bg: #162a3d;
  --info-border: #274d70;
  --info-text: #9bc7f3;

  --success-bg: #15281d;
  --success-border: #2c5a3c;
  --success-text: #98d0a7;

  --error-bg: #31191d;
  --error-border: #6f303a;
  --error-text: #ffb2bd;

  --error-line: rgba(255, 80, 80, 0.12);
  --error-char: rgba(255, 80, 80, 0.28);

  --tree-bg: #161c23;
  --tree-empty: #9aa6b5;
  --tree-key: #d593ff;
  --tree-string: #7cc7ff;
  --tree-number: #87d88f;
  --tree-boolean: #ffb36a;
  --tree-null: #a6afbb;
  --tree-plain: #e7eaf0;
  --tree-type: #9aa6b5;

  --search-match-bg: rgba(255, 214, 10, 0.14);
  --search-match-border: rgba(255, 214, 10, 0.24);
  --search-current-bg: rgba(255, 214, 10, 0.26);
  --search-current-border: rgba(255, 214, 10, 0.48);

  --stats-card-border: #313b47;
  --stats-label: #9aa6b5;
  --stats-value: #f1f4f8;

  --modal-bg: #1b2129;

  
  /* --accent-hover: #f97316; */
  /* --accent: #d95306; */
  --accent: #f97316;
  --accent-hover: #fb923c;
  --accent-soft: rgba(249, 115, 22, 0.16);
  --accent-border: rgba(251, 146, 60, 0.5);

  --accent2: #2856a0;

  --form-accent: var(--accent-border);
}

html[data-theme="dark"] .CodeMirror-cursor {
  border-left: 1px solid #fff;
}

html[data-theme="dark"] .CodeMirror {
  color: #f3f3f3;
  /* background: #1b1b1b; */
}

html[data-theme="dark"] .CodeMirror-gutters {
  background: var(--tree-bg);
  border-right: 1px solid #444;
}

html[data-theme="dark"] .CodeMirror-selected {
  background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .cm-s-default .cm-string {
  color: var(--tree-boolean);
}
html[data-theme="dark"] .cm-s-default .cm-number {
  color: var(--tree-number)
}
html[data-theme="dark"] .cm-s-default .cm-atom {
  color: var(--tree-string);
}

/* add Inspector */

:root {
  --inspector-panel-bg: #e5e6e9;
  --inspector-panel-border: #d1d4d9;

  --inspector-child-bg: #f3f3f4;
  --inspector-child-border: rgba(0, 0, 0, 0.08);

  --inspector-surface-bg: #fff;
  --inspector-surface-border: rgba(0, 0, 0, 0.08);

  --inspector-card-bg: #fff;
  --inspector-card-border: rgba(0, 0, 0, 0.08);

  --inspector-heading-color: #4b5461;
  --inspector-label-color: #6b717e;
  --inspector-value-color: #1f2835;
}

html[data-theme="dark"] {
  --inspector-panel-bg: #374151;
  --inspector-panel-border: #4b5563;

  --inspector-child-bg: #1f2937;
  --inspector-child-border: #4b5563;

  --inspector-surface-bg: #111827;
  --inspector-surface-border: #4b5563;

  --inspector-card-bg: #111827;
  --inspector-card-border: #4b5563;

  --inspector-heading-color: #cbd5e1;
  --inspector-label-color: #9ca3af;
  --inspector-value-color: #f3f4f6;
}