:root,
body.default-mode {
  /* Backgrounds */
  --bg-main: #F5F8F9;
  --bg-sidebar: #DCF0EB;
  --bg-container: #FFFFFF;
  --bg-card: #E8F2F0;
  --border: #ffffff;

  /* Text */
  --text-primary: #222222;
  --text-secondary: #6E7C7C;
  --text-link: #1BA39C;

  /* Header/Footer */
  --header-footer-bg-left: #DCF0EB;
  --header-footer-bg-right: #E6F1FA;
  --header-footer-text: #1C1C1C;
  --footer-bg-card: #F5F8F9;

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

  /* Buttons */
  --bg-button-primary: #1BA39C;
  --bg-button-secondary: #5AA6D1;
  --bg-button-disabled: #cccccc;
  --text-button-primary: #FFFFFF;
  --text-button-secondary: #000000;
  --text-button-disabled: #FFFFFF;

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

  /* Brand Colors */
  --brand-teal: #3BAEA0;   /* Primary CTA */
  --brand-orange: #F2994A; /* Secondary CTA */

  /* Accents */
  --accent-yellow: #F2C94C;
  --accent-green: #6FCF97;
  --accent-coral: #EB5757;
}

body.dark-mode {
  --bg-main: #12171A;
  --bg-sidebar: #193232;
  --bg-container: #1F2A2B;
  --bg-card: #2C3A3B;
  --border: #ffffff;

  --text-primary: #EAEAEA;
  --text-secondary: #B0B8B9;
  --text-link: #2EC4B6;

  --header-footer-bg-left: #193232;
  --header-footer-bg-right: #1C2235;
  --header-footer-text: #EAEAEA;
  --footer-bg-card: #1F2A2B;
  
  --bg-highlight: #80F9FF;
  --text-highlight: #FFFFFF;

  /* Buttons */
  --bg-button-primary: #2EC4B6;
  --bg-button-secondary: #5AA6D1;
  --bg-button-disabled: #cccccc;
  --text-button-primary: #FFFFFF;
  --text-button-secondary: #000000;
  --text-button-disabled: #FFFFFF;
  
  /* Tables */
  --bg-th: #444444;
  --bg-tr: #222222;
  --bg-tr-hover: #333333;
}
/*
*/
body.tough-love-mode {
  --bg-main: #FAF7F6;
  --bg-sidebar: #FFB3B3;
  --bg-container: #FFFFFF;
  --bg-card: #FFEFE9;
  --border: #ffffff;

  --text-primary: #222222;
  --text-secondary: #B0B8B9;
  --text-link: #E4572E;

  --header-footer-bg-left: #FFB3B3;
  --header-footer-bg-right: #FFD280;
  --header-footer-text: #222222;
  --footer-bg-card: #FAF7F6;
  
  /* Buttons */
  --bg-button-primary: #E4572E;
  --bg-button-secondary: #F2A541;
  --bg-button-disabled: #cccccc;
  --text-button-primary: #FFFFFF;
  --text-button-secondary: #000000;
  --text-button-disabled: #FFFFFF;
  
  /* Tables */
  --bg-th: #e0e0e0;
  --bg-tr: #f9f9f9;
  --bg-tr-hover: #f0f0f0;
}

/*
*/
body.tough-love-dark-mode {
  --bg-main: #181414;
  --bg-sidebar: #662222;
  --bg-container: #2A1E1E;
  --bg-card: #3A2424;
  --border: #ffffff;

  --text-primary: #EAEAEA;
  --text-secondary: #B0B8B9;
  --text-link: #FF6B35;

  --header-footer-bg-left: #662222;
  --header-footer-bg-right: #994C00;
  --header-footer-text: #EAEAEA;
  --footer-bg-card: #3A2424;
  
  --bg-highlight: #FFDD57;
  --text-highlight: #FFFFFF;

  /* Buttons */
  --bg-button-primary: #FF6B35;
  --bg-button-secondary: #F2A541;
  --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 */
body.default-mode .theme_mode_select select,
body.tough-love-mode .theme_mode_select select {
  background-color: #fff;
  color: #333;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
  background-image: url("data:image/svg+xml,%3Csvg fill='black' viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* Dark theme */
body.dark-mode .theme_mode_select select,
body.tough-love-dark-mode .theme_mode_select select {
  background-color: #222;
  color: #f0f0f0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
  background-image: url("data:image/svg+xml,%3Csvg fill='white' viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}