/* 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-color-light: #5a7bb8;
  --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-color-light: #a8632e;
  --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-color-light: #4a7030;
  --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-color-light: #6a3ba8;
  --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-color-light: #d04545;
  --primary-font: 'Merriweather', serif;
  --secondary-font: 'Roboto', sans-serif;
  --text-color: #5d0e0e;
  --bg-color: #fdf8f8;
}

/* Charlotta Theme */
[data-theme="charlotta"] {
  --primary-color: #d32f2f;
  --primary-color-light: #e05555;
  --primary-font: 'Playfair Display', serif;
  --secondary-font: 'Lato', sans-serif;
  --text-color: #5d1a1a;
  --bg-color: #fef9f9;
}

/* Margareta Theme */
[data-theme="margareta"] {
  --primary-color: #7b1fa2;
  --primary-color-light: #9c4bc2;
  --primary-font: 'Libre Baskerville', serif;
  --secondary-font: 'Open Sans', sans-serif;
  --text-color: #3e0a51;
  --bg-color: #faf8fc;
}

/* Beatrice Theme */
[data-theme="beatrice"] {
  --primary-color: #388e3c;
  --primary-color-light: #5ba85f;
  --primary-font: 'Crimson Text', serif;
  --secondary-font: 'Source Sans Pro', sans-serif;
  --text-color: #1b471e;
  --bg-color: #f8fbf8;
}

/* Hedvig Theme */
[data-theme="hedvig"] {
  --primary-color: #f57c00;
  --primary-color-light: #ff9800;
  --primary-font: 'Cormorant', serif;
  --secondary-font: 'Roboto', sans-serif;
  --text-color: #7a3e00;
  --bg-color: #fffbf5;
}

/* Dorotea Theme */
[data-theme="dorotea"] {
  --primary-color: #1976d2;
  --primary-color-light: #4791db;
  --primary-font: 'Merriweather', serif;
  --secondary-font: 'Josefin Sans', sans-serif;
  --text-color: #0c3b69;
  --bg-color: #f8fbff;
}

/* Katarina Theme */
[data-theme="katarina"] {
  --primary-color: #5d4037;
  --primary-color-light: #7d5e52;
  --primary-font: 'Playfair Display', serif;
  --secondary-font: 'Lato', sans-serif;
  --text-color: #2e201b;
  --bg-color: #faf9f7;
}

/* Elisabet Theme */
[data-theme="elisabet"] {
  --primary-color: #c2185b;
  --primary-color-light: #d8467a;
  --primary-font: 'Libre Baskerville', serif;
  --secondary-font: 'Open Sans', sans-serif;
  --text-color: #610c2d;
  --bg-color: #fdf8fb;
}

/* Ulrika Theme */
[data-theme="ulrika"] {
  --primary-color: #00796b;
  --primary-color-light: #26a69a;
  --primary-font: 'Crimson Text', serif;
  --secondary-font: 'Source Sans Pro', sans-serif;
  --text-color: #003c35;
  --bg-color: #f5faf9;
}

/* Lovisa Theme */
[data-theme="lovisa"] {
  --primary-color: #512da8;
  --primary-color-light: #7356bf;
  --primary-font: 'Cormorant', serif;
  --secondary-font: 'Roboto', sans-serif;
  --text-color: #281654;
  --bg-color: #f9f8fd;
}

/* 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;
}