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

  /* header */
  --bg-header: #ffffff;

  /* Cards */
  --bg-card: #ffffff;
  --shadow-card: 4px 8px 12px rgba(0,0,0,0.2);
  --bg-card-soft: #0d9488;
  --border: #94a3b8;
  --border-card: #4a515c;
  --border-accent: #0d9488;
  --border-warning: #efbe27;

  /* Text */
  --text-primary: #1e293b;
  --text-secondary: #94a3b8;
  --text-title: #0d9488;
  --text-link: #0d9488;

  /* 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: #0d9488;
  --text-button-primary: #ffffff;
  --bg-button-secondary: #ffffff;
  --border-button-secondary: #0d9488;
  --text-button-secondary: #0d9488;
  --bg-button-lock: #f0f0f0;
  --border-button-lock: #0d9488;
  --text-button-lock: #0d9488;
  --bg-button-locked: #ff4444;
  --text-button-locked: #ffffff;

  --fader-track: #eeeeee;
  /* 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;

  --accent-color: #0d9488;

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

html.dark-mode {
  --bg-main: #050505;
  --bg-main-alternative: #0f172a;

  /* header */
  --bg-header: #0f172a;

  /* Cards */
  --bg-card: #0f172a;
  --shadow-card: 4px 8px 12px rgba(255,255,255,0.4);
  --bg-card-soft: #38bdf8;
  --border: #7c7d7e;
  --border-card: #f8fafc;
  --border-accent: #38bdf8;
  --border-warning: #efbe27;

  --text-primary: #f8fafc;
  --text-secondary: #475569;
  --text-title: #38bdf8;
  --text-link: #38bdf8;

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

  /* Buttons */
  --bg-button-primary: #38bdf8;
  --text-button-primary: #050505;
  --bg-button-secondary: #050505;
  --border-button-secondary: #38bdf8;
  --text-button-secondary: #38bdf8;
  --bg-button-lock: #f0f0f0;
  --border-button-lock: #38bdf8;
  --text-button-lock: #38bdf8;
  --bg-button-locked: #ff4444;
  --text-button-locked: #ffffff;
  
  --fader-track: #333333;
/* 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.3);
  --glow: rgba(135, 173, 53, 0.2);

  --accent-color: #38bdf8;

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