:root {
  /* Dark theme variables */
  --dark-primary-color: #e50914;
  --dark-primary-color-rgb: 229, 9, 20;
  --dark-background-color: #141414;
  --dark-secondary-color: #232323;
  --dark-text-color: #fff;
  --dark-hover-color: rgba(255,255,255,0.1);
  --dark-lighter-primary-color: #ff3d48; /* Lighter Red */

  /* Base slideshow mobile main image defaults */
  --ss-mobile-main-w: 100px;
  --ss-mobile-main-h: 150px;

  /* Blue theme variables */
  --blue-primary-color: #2196F3;
  --blue-primary-color-rgb: 33, 150, 243;
  --blue-background-color: #1976D2;
  --blue-secondary-color: #1565C0;
  --blue-text-color: #fff;
  --blue-hover-color: rgba(255,255,255,0.1);
  --blue-lighter-primary-color: #64b5f6; /* Lighter Blue */

  /* Green theme variables */
  --green-primary-color: #4CAF50;
  --green-primary-color-rgb: 76, 175, 80;
  --green-background-color: #388E3C;
  --green-secondary-color: #2E7D32;
  --green-text-color: #fff;
  --green-hover-color: rgba(255,255,255,0.1);
  --green-lighter-primary-color: #81c784; /* Lighter Green */

  /* Purple theme variables */
  --purple-primary-color: #9C27B0;
  --purple-primary-color-rgb: 156, 39, 176;
  --purple-background-color: #7B1FA2;
  --purple-secondary-color: #6A1B9A;
  --purple-text-color: #fff;
  --purple-hover-color: rgba(255,255,255,0.1);
  --purple-lighter-primary-color: #ce93d8; /* Lighter Purple */

  /* Orange theme variables */
  --orange-primary-color: #FF9800;
  --orange-primary-color-rgb: 255, 152, 0;
  --orange-background-color: #F57C00;
  --orange-secondary-color: #E65100;
  --orange-text-color: #fff;
  --orange-hover-color: rgba(255,255,255,0.1);
  --orange-lighter-primary-color: #ffb74d; /* Lighter Orange */

  /* Red theme variables */
  --red-primary-color: #F44336;
  --red-primary-color-rgb: 244, 67, 54;
  --red-background-color: #D32F2F;
  --red-secondary-color: #C62828;
  --red-text-color: #fff;
  --red-hover-color: rgba(255,255,255,0.1);
  --red-lighter-primary-color: #ff7961; /* Lighter Red 2 */

  /* Teal theme variables */
  --teal-primary-color: #009688;
  --teal-primary-color-rgb: 0, 150, 136;
  --teal-background-color: #00796B;
  --teal-secondary-color: #00695C;
  --teal-text-color: #fff;
  --teal-hover-color: rgba(255,255,255,0.1);
  --teal-lighter-primary-color: #4db6ac; /* Lighter Teal */

  /* Brown theme variables */
  --brown-primary-color: #795548;
  --brown-primary-color-rgb: 121, 85, 72;
  --brown-background-color: #5D4037;
  --brown-secondary-color: #4E342E;
  --brown-text-color: #fff;
  --brown-hover-color: rgba(255,255,255,0.1);
  --brown-lighter-primary-color: #a1887f; /* Lighter Brown */

  /* Gray theme variables */
  --gray-primary-color: #9E9E9E;
  --gray-primary-color-rgb: 158, 158, 158;
  --gray-background-color: #757575;
  --gray-secondary-color: #616161;
  --gray-text-color: #fff;
  --gray-hover-color: rgba(255,255,255,0.1);
  --gray-lighter-primary-color: #c5c5c5; /* Lighter Gray */

  /* Light themes */
  --light-blue-primary-color: #6ab7ff;
  --light-blue-primary-color-rgb: 106, 183, 255;
  --light-blue-background-color: #f0f8ff;
  --light-blue-secondary-color: #e3f2fd;
  --light-blue-text-color: #0d47a1;
  --light-blue-hover-color: rgba(13,71,161,0.2);
  --light-blue-lighter-primary-color: #a4d3ff; /* Lighter Light Blue */

  --light-green-primary-color: #86df8a;
  --light-green-primary-color-rgb: 134, 223, 138;
  --light-green-background-color: #f1f8e9;
  --light-green-secondary-color: #e8f5e9;
  --light-green-text-color: #1b5e20;
  --light-green-hover-color: rgba(27,94,32,0.2);
  --light-green-lighter-primary-color: #b0e8b3; /* Lighter Light Green */

  --light-purple-primary-color: #bd94c7;
  --light-purple-primary-color-rgb: 189, 148, 199;
  --light-purple-background-color: #f3e5f5;
  --light-purple-secondary-color: #e1bee7;
  --light-purple-text-color: #4a148c;
  --light-purple-hover-color: rgba(74,20,140,0.2);
  --light-purple-lighter-primary-color: #d3bfd9; /* Lighter Light Purple */

  --light-orange-primary-color: #ffcc80;
  --light-orange-primary-color-rgb: 255, 204, 128;
  --light-orange-background-color: #fff3e0;
  --light-orange-secondary-color: #ffe0b2;
  --light-orange-text-color: #e65100;
  --light-orange-hover-color: rgba(230,81,0,0.2);
  --light-orange-lighter-primary-color: #ffe0b2; /* Lighter Light Orange */

  --light-red-primary-color: #ff8a80;
  --light-red-primary-color-rgb: 255, 138, 128;
  --light-red-background-color: #ffebee;
  --light-red-secondary-color: #ffcdd2;
  --light-red-text-color: #b71c1c;
  --light-red-hover-color: rgba(183,28,43,0.2);
  --light-red-lighter-primary-color: #ffbaba; /* Lighter Light Red */

  --light-teal-primary-color: #80cbc4;
  --light-teal-primary-color-rgb: 128, 203, 196;
  --light-teal-background-color: #e0f2f1;
  --light-teal-secondary-color: #b2dfdb;
  --light-teal-text-color: #004d40;
  --light-teal-hover-color: rgba(0,77,64,0.2);
  --light-teal-lighter-primary-color: #b2dfdb; /* Lighter Light Teal */

  --light-brown-primary-color: #a1887f;
  --light-brown-primary-color-rgb: 161, 136, 127;
  --light-brown-background-color: #efebe9;
  --light-brown-secondary-color: #d7ccc8;
  --light-brown-text-color: #3e2723;
  --light-brown-hover-color: rgba(62,39,35,0.2);
  --light-brown-lighter-primary-color: #c9b4ae; /* Lighter Light Brown */

  --light-gray-primary-color: #bdbdbd;
  --light-gray-primary-color-rgb: 189, 189, 189;
  --light-gray-background-color: #fafafa;
  --light-gray-secondary-color: #f5f5f5;
  --light-gray-text-color: #424242;
  --light-gray-hover-color: rgba(66,66,66,0.2);
  --light-gray-lighter-primary-color: #e0e0e0; /* Lighter Light Gray */

  --light-pink-primary-color: #f48fb1;
  --light-pink-primary-color-rgb: 244, 143, 177;
  --light-pink-background-color: #fce4ec;
  --light-pink-secondary-color: #f8bbd0;
  --light-pink-text-color: #880e4f;
  --light-pink-hover-color: rgba(136,14,79,0.2);
  --light-pink-lighter-primary-color: #ffc1e3; /* Lighter Light Pink */

  --light-yellow-primary-color: #fff176;
  --light-yellow-primary-color-rgb: 255, 241, 118;
  --light-yellow-background-color: #fffde7;
  --light-yellow-secondary-color: #fff9c4;
  --light-yellow-text-color: #f57f17;
  --light-yellow-hover-color: rgba(245,127,23,0.2);
  --light-yellow-lighter-primary-color: #ffffa8; /* Lighter Light Yellow */

  /* New variables for conditional modal styling */
}

/* Theme mappings */
[data-theme="dark"] {
  --primary-color: var(--dark-primary-color);
  --primary-color-rgb: var(--dark-primary-color-rgb);
  --background-color: var(--dark-background-color);
  --secondary-color: var(--dark-secondary-color);
  --text-color: var(--dark-text-color);
  --hover-color: var(--dark-hover-color);
  --lighter-primary-color: var(--dark-lighter-primary-color);
}

[data-theme="blue"] {
  --primary-color: var(--blue-primary-color);
  --primary-color-rgb: var(--blue-primary-color-rgb);
  --background-color: var(--blue-background-color);
  --secondary-color: var(--blue-secondary-color);
  --text-color: var(--blue-text-color);
  --hover-color: var(--blue-hover-color);
  --lighter-primary-color: var(--blue-lighter-primary-color);
}

[data-theme="green"] {
  --primary-color: var(--green-primary-color);
  --primary-color-rgb: var(--green-primary-color-rgb);
  --background-color: var(--green-background-color);
  --secondary-color: var(--green-secondary-color);
  --text-color: var(--green-text-color);
  --hover-color: var(--green-hover-color);
  --lighter-primary-color: var(--green-lighter-primary-color);
}

[data-theme="purple"] {
  --primary-color: var(--purple-primary-color);
  --primary-color-rgb: var(--purple-primary-color-rgb);
  --background-color: var(--purple-background-color);
  --secondary-color: var(--purple-secondary-color);
  --text-color: var(--purple-text-color);
  --hover-color: var(--purple-hover-color);
  --lighter-primary-color: var(--purple-lighter-primary-color);
}

[data-theme="orange"] {
  --primary-color: var(--orange-primary-color);
  --primary-color-rgb: var(--orange-primary-color-rgb);
  --background-color: var(--orange-background-color);
  --secondary-color: var(--orange-secondary-color);
  --text-color: var(--orange-text-color);
  --hover-color: var(--orange-hover-color);
  --lighter-primary-color: var(--orange-lighter-primary-color);
}

[data-theme="red"] {
  --primary-color: var(--red-primary-color);
  --primary-color-rgb: var(--red-primary-color-rgb);
  --background-color: var(--red-background-color);
  --secondary-color: var(--red-secondary-color);
  --text-color: var(--red-text-color);
  --hover-color: var(--red-hover-color);
  --lighter-primary-color: var(--red-lighter-primary-color);
}

[data-theme="teal"] {
  --primary-color: var(--teal-primary-color);
  --primary-color-rgb: var(--teal-primary-color-rgb);
  --background-color: var(--teal-background-color);
  --secondary-color: var(--teal-secondary-color);
  --text-color: var(--teal-text-color);
  --hover-color: var(--teal-hover-color);
  --lighter-primary-color: var(--teal-lighter-primary-color);
}

[data-theme="brown"] {
  --primary-color: var(--brown-primary-color);
  --primary-color-rgb: var(--brown-primary-color-rgb);
  --background-color: var(--brown-background-color);
  --secondary-color: var(--brown-secondary-color);
  --text-color: var(--brown-text-color);
  --hover-color: var(--brown-hover-color);
  --lighter-primary-color: var(--brown-lighter-primary-color);
}

[data-theme="gray"] {
  --primary-color: var(--gray-primary-color);
  --primary-color-rgb: var(--gray-primary-color-rgb);
  --background-color: var(--gray-background-color);
  --secondary-color: var(--gray-secondary-color);
  --text-color: var(--gray-text-color);
  --hover-color: var(--gray-hover-color);
  --lighter-primary-color: var(--gray-lighter-primary-color);
}

[data-theme="light-blue"] {
  --primary-color: var(--light-blue-primary-color);
  --primary-color-rgb: var(--light-blue-primary-color-rgb);
  --background-color: var(--light-blue-background-color);
  --secondary-color: var(--light-blue-secondary-color);
  --text-color: var(--light-blue-text-color);
  --hover-color: var(--light-blue-hover-color);
  --lighter-primary-color: var(--light-blue-lighter-primary-color);
}

[data-theme="light-green"] {
  --primary-color: var(--light-green-primary-color);
  --primary-color-rgb: var(--light-green-primary-color-rgb);
  --background-color: var(--light-green-background-color);
  --secondary-color: var(--light-green-secondary-color);
  --text-color: var(--light-green-text-color);
  --hover-color: var(--light-green-hover-color);
  --lighter-primary-color: var(--light-green-lighter-primary-color);
}

[data-theme="light-purple"] {
  --primary-color: var(--light-purple-primary-color);
  --primary-color-rgb: var(--light-purple-primary-color-rgb);
  --background-color: var(--light-purple-background-color);
  --secondary-color: var(--light-purple-secondary-color);
  --text-color: var(--light-purple-text-color);
  --hover-color: var(--light-purple-hover-color);
  --lighter-primary-color: var(--light-purple-lighter-primary-color);
}

[data-theme="light-orange"] {
  --primary-color: var(--light-orange-primary-color);
  --primary-color-rgb: var(--light-orange-primary-color-rgb);
  --background-color: var(--light-orange-background-color);
  --secondary-color: var(--light-orange-secondary-color);
  --text-color: var(--light-orange-text-color);
  --hover-color: var(--light-orange-hover-color);
  --lighter-primary-color: var(--light-orange-lighter-primary-color);
}

[data-theme="light-red"] {
  --primary-color: var(--light-red-primary-color);
  --primary-color-rgb: var(--light-red-primary-color-rgb);
  --background-color: var(--light-red-background-color);
  --secondary-color: var(--light-red-secondary-color);
  --text-color: var(--light-red-text-color);
  --hover-color: var(--light-red-hover-color);
  --lighter-primary-color: var(--light-red-lighter-primary-color);
}

[data-theme="light-teal"] {
  --primary-color: var(--light-teal-primary-color);
  --primary-color-rgb: var(--light-teal-primary-color-rgb);
  --background-color: var(--light-teal-background-color);
  --secondary-color: var(--light-teal-secondary-color);
  --text-color: var(--light-teal-text-color);
  --hover-color: var(--light-teal-hover-color);
  --lighter-primary-color: var(--light-teal-lighter-primary-color);
}

[data-theme="light-brown"] {
  --primary-color: var(--light-brown-primary-color);
  --primary-color-rgb: var(--light-brown-primary-color-rgb);
  --background-color: var(--light-brown-background-color);
  --secondary-color: var(--light-brown-secondary-color);
  --text-color: var(--light-brown-text-color);
  --hover-color: var(--light-brown-hover-color);
  --lighter-primary-color: var(--light-brown-lighter-primary-color);
}

[data-theme="light-gray"] {
  --primary-color: var(--light-gray-primary-color);
  --primary-color-rgb: var(--light-gray-primary-color-rgb);
  --background-color: var(--light-gray-background-color);
  --secondary-color: var(--light-gray-secondary-color);
  --text-color: var(--light-gray-text-color);
  --hover-color: var(--light-gray-hover-color);
  --lighter-primary-color: var(--light-gray-lighter-primary-color);
}

[data-theme="light-pink"] {
  --primary-color: var(--light-pink-primary-color);
  --primary-color-rgb: var(--light-pink-primary-color-rgb);
  --background-color: var(--light-pink-background-color);
  --secondary-color: var(--light-pink-secondary-color);
  --text-color: var(--light-pink-text-color);
  --hover-color: var(--light-pink-hover-color);
  --lighter-primary-color: var(--light-pink-lighter-primary-color);
}

[data-theme="light-yellow"] {
  --primary-color: var(--light-yellow-primary-color);
  --primary-color-rgb: var(--light-yellow-primary-color-rgb);
  --background-color: var(--light-yellow-background-color);
  --secondary-color: var(--light-yellow-secondary-color);
  --text-color: var(--light-yellow-text-color);
  --hover-color: var(--light-yellow-hover-color);
  --lighter-primary-color: var(--light-yellow-lighter-primary-color);
}