/* Theme System for SBVE Website */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;700&family=Josefin+Sans:wght@400;700&family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@400;700&family=Crimson+Text:wght@400;700&family=Open+Sans:wght@400;700&family=Libre+Baskerville:wght@400;700&family=Lato:wght@400;700&family=Merriweather:wght@400;700&family=Roboto:wght@400;700&display=swap');

:root {
  /* Default theme variables will be set by theme selection */
}

/* Birgitta Theme (Default) */
[data-theme="birgitta"] {
  --primary-color: #3b5998;
  --primary-font: 'Cormorant', serif;
  --secondary-font: 'Josefin Sans', sans-serif;
  --text-color: #333;
  --bg-color: #fff;
}

/* Sofia Theme */
[data-theme="sofia"] {
  --primary-color: #8b4513;
  --primary-font: 'Playfair Display', serif;
  --secondary-font: 'Source Sans Pro', sans-serif;
  --text-color: #2c1810;
  --bg-color: #faf8f5;
}

/* Desirée Theme */
[data-theme="desiree"] {
  --primary-color: #2d5016;
  --primary-font: 'Crimson Text', serif;
  --secondary-font: 'Open Sans', sans-serif;
  --text-color: #1a2e0a;
  --bg-color: #f8faf6;
}

/* Saga Theme */
[data-theme="saga"] {
  --primary-color: #4a148c;
  --primary-font: 'Libre Baskerville', serif;
  --secondary-font: 'Lato', sans-serif;
  --text-color: #2a0845;
  --bg-color: #faf9fc;
}

/* Sibylla Theme */
[data-theme="sibylla"] {
  --primary-color: #b71c1c;
  --primary-font: 'Merriweather', serif;
  --secondary-font: 'Roboto', sans-serif;
  --text-color: #5d0e0e;
  --bg-color: #fdf8f8;
}

/* Apply theme variables to elements */
body {
  font-family: var(--secondary-font);
  color: var(--text-color);
  background-color: var(--bg-color);
}

.navbar {
  background-color: var(--primary-color) !important;
}

.navbar-brand {
  font-family: var(--primary-font);
}

h1, h2, h3 {
  font-family: var(--primary-font);
  color: var(--primary-color);
}

h2, h3 {
  color: white;
}

.card-header {
  background-color: var(--primary-color);
}

.accordion-button {
  background-color: var(--primary-color);
  font-family: var(--primary-font);
}

.accordion-button:not(.collapsed) {
  background-color: var(--primary-color);
}

footer {
  background-color: var(--primary-color) !important;
}