:root,
:root[data-theme='light'] {
  color-scheme: light;

  --page-bg: #f5f8fc;
  --surface: #ffffff;
  --text-color: #3d4956;
  --text-muted: #697786;
  --border-color: color-mix(in srgb, var(--text-color) 25%, transparent);
  --hover-bg: #edf3f9;
  --accent: #2a9fff;
  --button-primary-text: #ffffff;
}

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

  --page-bg: #11161d;
  --surface: #181f28;
  --text-color: #edf3f8;
  --text-muted: #a9b4c1;
  --border-color: color-mix(in srgb, var(--text-color) 18%, transparent);
  --hover-bg: #202a35;
  --accent: #2a9fff;
  --button-primary-text: #ffffff;
}

html,
body {
  background: var(--page-bg);
  color: var(--text-color);
}