:root {
  color-scheme: light;
  --color-bg: #f3f6f8;
  --color-bg-soft: #f8fafb;
  --color-surface: #ffffff;
  --color-text: #1d2733;
  --color-muted: #637083;
  --color-border: #d9e2ea;
  --color-accent: #0f766e;
  --color-accent-text: #ffffff;
  --color-sidebar: #17212b;
  --color-sidebar-text: #f6f8fa;
  --color-sidebar-muted: #c0c9d2;
  --color-sidebar-border: #263340;
  --color-sidebar-active: #233241;
  --color-sidebar-icon: #2d3b49;
  --shadow-soft: 0 10px 24px rgb(31 41 51 / 0.06);
  --shadow-strong: 0 20px 60px rgb(15 23 42 / 0.22);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #10161c;
  --color-bg-soft: #141c23;
  --color-surface: #18212a;
  --color-text: #eef3f7;
  --color-muted: #a6b2bf;
  --color-border: #2a3744;
  --color-accent: #2dd4bf;
  --color-accent-text: #09211e;
  --color-sidebar: #0c1218;
  --color-sidebar-text: #f6f8fa;
  --color-sidebar-muted: #9ba8b4;
  --color-sidebar-border: #1d2934;
  --color-sidebar-active: #172532;
  --color-sidebar-icon: #1f3140;
  --shadow-soft: 0 10px 24px rgb(0 0 0 / 0.18);
  --shadow-strong: 0 22px 70px rgb(0 0 0 / 0.42);
}

[data-accent-color="red"] {
  --color-accent: #dc2626;
  --color-accent-text: #ffffff;
}

[data-accent-color="blue"] {
  --color-accent: #2563eb;
  --color-accent-text: #ffffff;
}

[data-accent-color="green"] {
  --color-accent: #16a34a;
  --color-accent-text: #ffffff;
}

[data-accent-color="purple"] {
  --color-accent: #7c3aed;
  --color-accent-text: #ffffff;
}

[data-theme="dark"][data-accent-color="red"] {
  --color-accent: #f87171;
  --color-accent-text: #2f0707;
}

[data-theme="dark"][data-accent-color="blue"] {
  --color-accent: #60a5fa;
  --color-accent-text: #061d3b;
}

[data-theme="dark"][data-accent-color="green"] {
  --color-accent: #4ade80;
  --color-accent-text: #052e14;
}

[data-theme="dark"][data-accent-color="purple"] {
  --color-accent: #a78bfa;
  --color-accent-text: #1f0d3f;
}

[data-font-size="small"] {
  font-size: 14px;
}

[data-font-size="normal"] {
  font-size: 16px;
}

[data-font-size="large"] {
  font-size: 18px;
}