:root,
html.default-mode {
  /* Backgrounds */
  --bg-main: #ffffff;
  --bg-card: #f9f9f9;

  /* Cards */
  --border: #000000;
  --accent: #00ff41; 
  --warning: #d00000;

  /* Text */
  --text-primary: #000000;
  --text-secondary: #1b4332;
  --text-link: #1b4332;

  /* Extra */
  --bg-error: #FDF7E2;
  --bg-highlight: #ffff00;
  --text-error: #EF2727;
  --text-highlight: #222222;
  --text-warning: #efbe27;

  /* Buttons */
  --bg-button-primary: #009d28;
  --bg-button-secondary: #007cff;
  --bg-button-disabled: #cccccc;
  --text-button-primary: #FFFFFF;
  --text-button-secondary: #FFFFFF;
  --text-button-disabled: #FFFFFF;

  /* Tables */
  --bg-th: #e0e0e0;
  --bg-tr: #f9f9f9;
  --bg-tr-hover: #f0f0f0;
}

html.dark-mode {
  --bg-main: #050505;
  --bg-card: #222222;

  /* Cards */
  --border: #444444;
  --accent: #00ff41; 
  --warning: #ff0033;

  --text-primary: #ffffff;
  --text-secondary: #00ff41;
  --text-link: #00ff41;

  --bg-highlight: #80F9FF;
  --text-highlight: #FFFFFF;

  /* Buttons */
  --bg-button-primary: #009d28;
  --bg-button-secondary: #007cff;
  --bg-button-disabled: #cccccc;
  --text-button-primary: #FFFFFF;
  --text-button-secondary: #FFFFFF;
  --text-button-disabled: #FFFFFF;
  
  /* Tables */
  --bg-th: #444444;
  --bg-tr: #222222;
  --bg-tr-hover: #333333;
}

/* Light theme */
html.default-mode .theme_mode_select select {
  background-color: #fff;
  color: #333;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}

/* Dark theme */
html.dark-mode .theme_mode_select select {
  background-color: #222;
  color: #f0f0f0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}