:root {
  /* Background colors */
  --bg-primary: #1e1e2e;
  --bg-secondary: #181825;

  --bg-tertiary: #11111b;

  /* Text colors */
  --text-primary: #cdd6f4;
  --text-secondary: #bac2de;
  --text-muted: #a6adc8;

  /* Accent colors */
  --color-green: #a6e3a1;
  --color-red: #f38ba8;
  --color-orange: #fab387;

  /* Border */
  --border: #313244;
}

.light {
  /* Background colors */
  --bg-primary: #eff1f5;
  --bg-secondary: #e6e9ef;

  --bg-tertiary: #dce0e8;

  /* Text colors */
  --text-primary: #4c4f69;
  --text-secondary: #5c5f77;
  --text-muted: #6c6f85;

  /* Accent colors */
  --color-green: #40a02b;
  --color-red: #d20f39;
  --color-orange: #fe640b;

  /* Border */
  --border: #ccd0da;
}