/* Default theme (gold-like) */
:root {
  --primary-color: #8b722e;
  --primary-color-rgb: 139, 114, 46;
  --primary-transparent: #8a743730;
  --secondary-color: #b99c4f;
  --secondary-color-rgb: 185, 156, 79;
  --accent-color: #9e8f46;
  --accent-color-rgb: 158, 143, 70;
  --background-color: #ffffff;
  --foreground-color: #f5f5dc;
  --text-color: #000000;
  --border-color: #a68a3d;
  --hover-color: #d4ba73;
  --shadow-color: rgba(0, 0, 0, 0.25);
  --background-light: #ffffff;
  --background-dark: #000000;
  --text-light: #000000;
  --text-dark: #ffffff;

  /* UI Elements */
  --button-bg: var(--primary-color);
  --button-hover: #7a682d;
  --button-border: #8b6b3d;
  --button-text: var(--text-color);
  --link-color: #007bff;
  --link-hover-color: #0056b3;
  --card-bg: var(--foreground-color);
  --card-border: var(--border-color);
}

/* Theme 1 */
.theme-dark {
  --primary-color: #1e1e1e;
  --primary-color-rgb: 30, 30, 30;
  --secondary-color: #444444;
  --secondary-color-rgb: 68, 68, 68;
  --accent-color: #555555;
  --accent-color-rgb: 85, 85, 85;
  --background-color: #000000;
  --foreground-color: #222222;
  --text-color: #ffffff;
  --border-color: #666666;
  --hover-color: #333333;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --background-light: #333333;
  --background-dark: #000000;
  --text-light: #ffffff;
  --text-dark: #ffffff;

  /* UI Elements */
  --button-bg: var(--primary-color);
  --button-hover: #343434 ;
  --button-border: #2A2A2A;
  --button-text: var(--text-color);
  --link-color: #89b4fa;
  --link-hover-color: #a6c8ff;
  --card-bg: var(--foreground-color);
  --card-border: var(--border-color);
}

/* Theme 2 */
.theme-blue {
  --primary-color: #2e5d8b;
  --primary-color-rgb: 46, 93, 139;
  --secondary-color: #4fa2b9;
  --secondary-color-rgb: 79, 162, 185;
  --accent-color: #6bb4c6;
  --accent-color-rgb: 107, 180, 198;
  --background-color: #f0f8ff;
  --foreground-color: #e6f0ff;
  --text-color: #111111;
  --border-color: #77bde0;
  --hover-color: #93c6e8;
  --shadow-color: rgba(46, 93, 139, 0.2);
  --background-light: #f0f8ff;
  --background-dark: #2e5d8b;
  --text-light: #111111;
  --text-dark: #ffffff;

  /* UI Elements */
  --button-bg: var(--primary-color);
  --button-hover: #29537d ;
  --button-border: #1b3752;
  --button-text: var(--text-color);
  --link-color: #007bff;
  --link-hover-color: #0056b3;
  --card-bg: var(--foreground-color);
  --card-border: var(--border-color);
}

/* Theme 3 */
.theme-green {
  --primary-color: #104849;
  --primary-color-rgb: 16, 72, 73;
  --secondary-color: #2a6a6b;
  --secondary-color-rgb: 42, 106, 107;
  --accent-color: #448c8d;
  --accent-color-rgb: 68, 140, 141;
  --background-color: #f0f7f7;
  --foreground-color: #e6f2f2;
  --text-color: #111111;
  --border-color: #5ea2a3;
  --hover-color: #78b8b9;
  --shadow-color: rgba(16, 72, 73, 0.2);
  --background-light: #f0f7f7;
  --background-dark: #104849;
  --text-light: #111111;
  --text-dark: #ffffff;

  /* UI Elements */
  --button-bg: var(--primary-color);
  --button-hover: #0e4041 ;
  --button-border: #0b3334;
  --button-text: var(--text-dark);
  --link-color: #28a745;
  --link-hover-color: #218838;
  --card-bg: var(--foreground-color);
  --card-border: var(--border-color);
}

/* Use variables in your CSS */
button {
  background-color: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--secondary-color);
}