:root,
html.default-mode {
  /* Backgrounds */
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-soft: #f0f4e8;
  --border-card: #87ad35;

  --bg-newsflash: #fff9e6;
  --border-newsflash: #87ad35;
  --text-newsflash: #1e293b;

  /* header */
  --bg-header: rgba(255, 255, 255, 0.8);

  /* Cards */
  --border: #e2e8f0;

  /* Text */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-title: #87ad35;
  --text-link: #87ad35;

  /* Extra */
  --bg-error: #FDF7E2;
  --bg-highlight: #ffff00;

  --text-error: #EF2727;
  --text-highlight: #222222;
  --text-warning: #efbe27;
  --accent-blue: #3b82f6;       /* Clean Blue */

  /* Buttons */
  --bg-button-primary: #87ad35;
  --text-button-primary: #ffffff;
  --bg-button-secondary: #64748b;
  --text-button-secondary: #ffffff;

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

  --shadow: 5px 5px 30px 4px rgba(0, 0, 0, 0.3);
  --glow: rgba(135, 173, 53, 0.2);

  --transition: all 0.3s ease;

    font-family: 'Inter', sans-serif;
}

html.dark-mode {
  --bg-main: #0f1113;
  --bg-card: #16181b;
  --bg-card-soft: #2c3036;
  --border-card: #87ad35;

  --bg-newsflash: #38bdf8;
  --border-newsflash: #334155;
  --text-newsflash: #f1f5f9;

  /* header */
  --bg-header: rgba(15, 17, 19, 0.5);

  /* Cards */
  --border: #222529;

  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-title: #87ad35;
  --text-link: #87ad35;

  --bg-highlight: #80F9FF;
  --text-highlight: #FFFFFF;
  --accent-blue: #3b82f6;       /* Clean Blue */

  /* Buttons */
  --bg-button-primary: #87ad35;
  --text-button-primary: #ffffff;
  --bg-button-secondary: #a0a0a0;
  --text-button-secondary: #ffffff;
  
  /* Tables */
  --bg-th: #444444;
  --bg-tr: #222222;
  --bg-tr-hover: #333333;

    font-family: 'Inter', sans-serif;

  --shadow: 5px 5px 20px 4px rgba(255, 255, 255, 0.4);
  --glow: rgba(135, 173, 53, 0.2);

  --transition: all 0.3s ease;

}

/* 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);
}