:root {
  --background-primary: #1e1f24; /* softer than #23272f */
  --background-secondary: #2a2c33;
  --background-tertiary: #373a45;
  --background-quaternary: #474a56;

  --text-primary: #f0f0f0;
  --text-secondary: #c0c6d4;
  --text-muted: #8c92a1;
  --text-silent: #5c5f6b;

  --accent: #3399ff;

  --border-primary: #4b505f;
  --border-secondary: #3a3f4b;
  --border-tertiary: #2c3038;
  --border-quaternary: #1e1f24;

  --font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

body {
  background: var(--background-primary);
  color: var(--text-primary);
  font-family: var(--font-family);
  transition:
    background 0.2s,
    color 0.2s;
}

body.light {
  --background-primary: #ffffff;
  --background-secondary: #f6f7fa;
  --background-tertiary: #e9ecf2;
  --background-quaternary: #d4d9e2;

  --text-primary: #1e1f24;
  --text-secondary: #4a5160;
  --text-muted: #6d7384;
  --text-silent: #c3c8d1;

  --accent: #217dbb;

  --border-primary: #c0c6d4;
  --border-secondary: #d4d9e2;
  --border-tertiary: #e9ecf2;
  --border-quaternary: #f6f7fa;
}