:root {
  --accent: #4f6ef7;
  --accent-hover: #3d5ce6;
  --accent-light: #eef1ff;

  --bg: #f5f6fa;
  --bg-panel: #ffffff;
  --bg-hover: #f0f2f8;
  --bg-active: #e8ecfb;
  --bg-input: #f8f9fc;

  --border: #e2e5ef;
  --border-light: #edf0f7;

  --text: #1a1d2e;
  --text-secondary: #555e7a;
  --text-muted: #9099b5;
  --text-on-accent: #ffffff;

  --sidebar-w: 220px;
  --list-w: 320px;
  --topbar-h: 52px;

  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);

  --unread-dot: #4f6ef7;
  --star: #f5a623;
  --danger: #e53e3e;
  --success: #38a169;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0f1117;
  --bg-panel: #1a1d2e;
  --bg-hover: #22263a;
  --bg-active: #2a2f4a;
  --bg-input: #22263a;

  --border: #2e334d;
  --border-light: #252944;

  --text: #e8eaf6;
  --text-secondary: #9099b5;
  --text-muted: #555e7a;

  --accent-light: #1e2545;
  color-scheme: dark;
}

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