html[data-theme-id="default"][data-color-mode="light"] {
  --bg: #f6f7fb;
  --bg-elevated: rgba(255, 255, 255, 0.86);
  --bg-panel: #ffffff;
  --bg-soft: #eef2f7;
  --bg-hover: #e8eef7;
  --text: #1f2937;
  --text-muted: #6b7280;
  --text-soft: #94a3b8;
  --border: rgba(148, 163, 184, 0.22);
  --border-strong: rgba(148, 163, 184, 0.35);
  --brand: #3a6ff7;
  --brand-strong: #2757d6;
  --brand-soft: rgba(58, 111, 247, 0.12);
  --code-bg: #fbfdff;
  --code-fg: #233044;
  --code-toolbar-bg: #eef3f9;
  --code-panel-border: rgba(148, 163, 184, 0.28);
  --code-panel-shadow: 0 20px 44px rgba(148, 163, 184, 0.18);
  --code-line-number: #9aa9bc;
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.06);
  --body-bg:
    radial-gradient(circle at top left, rgba(58, 111, 247, 0.12), transparent 30%),
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 26%),
    linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
  --brand-mark-bg: linear-gradient(135deg, var(--brand), #7c3aed);
  --active-file-bg: linear-gradient(180deg, rgba(58,111,247,0.12), rgba(58,111,247,0.08));
  --active-file-border: rgba(58,111,247,0.18);
  --active-file-shadow: 0 8px 18px rgba(58,111,247,0.08);
  --loading-bar-bg: linear-gradient(90deg, var(--brand), #38bdf8);
}

html[data-theme-id="default"][data-color-mode="dark"] {
  --bg: #0b1120;
  --bg-elevated: rgba(15, 23, 42, 0.82);
  --bg-panel: #0f172a;
  --bg-soft: #111827;
  --bg-hover: #182033;
  --text: #e5edf9;
  --text-muted: #a3b2c6;
  --text-soft: #6f8099;
  --border: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.26);
  --brand: #7aa2ff;
  --brand-strong: #93b4ff;
  --brand-soft: rgba(122, 162, 255, 0.14);
  --code-bg: #142033;
  --code-fg: #dbeafe;
  --code-toolbar-bg: #1b2a40;
  --code-panel-border: rgba(148, 163, 184, 0.16);
  --code-panel-shadow: 0 14px 32px rgba(2, 6, 23, 0.22);
  --code-line-number: #6f8099;
  --shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.34);
  --shadow-md: 0 14px 32px rgba(2, 6, 23, 0.28);
  --shadow-sm: 0 6px 18px rgba(2, 6, 23, 0.2);
  --body-bg:
    radial-gradient(circle at top left, rgba(58, 111, 247, 0.16), transparent 30%),
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 26%),
    linear-gradient(180deg, #0b1120 0%, #09101c 100%);
  --brand-mark-bg: linear-gradient(135deg, #7aa2ff, #38bdf8);
  --active-file-bg: linear-gradient(180deg, rgba(122,162,255,0.18), rgba(122,162,255,0.09));
  --active-file-border: rgba(122,162,255,0.24);
  --active-file-shadow: 0 12px 22px rgba(2,6,23,0.26);
  --loading-bar-bg: linear-gradient(90deg, #7aa2ff, #38bdf8);
}