@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --font-serif: 'Merriweather', serif;
  --font-sans: 'Plus Jakarta Sans', sans-serif;
}

/* THEME 1: FOREST */
html[data-theme="forest"][data-mode="light"] {
  --bg-primary: #f6f8f5;
  --bg-surface: #ffffff;
  --bg-sidebar: #edf2eb;
  --border-color: #dbe4d8;
  --text-main: #1b261b;
  --text-muted: #536453;
  --accent: #2e6930;
  --accent-hover: #225124;
  --wood-branch: #6b4c35;
}
html[data-theme="forest"][data-mode="dark"] {
  --bg-primary: #0e150f;
  --bg-surface: #172118;
  --bg-sidebar: #131b14;
  --border-color: #243526;
  --text-main: #eaf0e9;
  --text-muted: #94aa93;
  --accent: #48a04c;
  --accent-hover: #5ec263;
  --wood-branch: #8c674b;
}

/* THEME 2: GARDEN */
html[data-theme="garden"][data-mode="light"] {
  --bg-primary: #faf6f8;
  --bg-surface: #ffffff;
  --bg-sidebar: #f5edf2;
  --border-color: #edd9e5;
  --text-main: #2b1523;
  --text-muted: #6e4a62;
  --accent: #b83280;
  --accent-hover: #972665;
  --wood-branch: #785340;
}
html[data-theme="garden"][data-mode="dark"] {
  --bg-primary: #190f16;
  --bg-surface: #241420;
  --bg-sidebar: #1d101a;
  --border-color: #3b2034;
  --text-main: #faedf6;
  --text-muted: #b58ca7;
  --accent: #e052a0;
  --accent-hover: #f074b8;
  --wood-branch: #946953;
}

/* THEME 3: FARM */
html[data-theme="farm"][data-mode="light"] {
  --bg-primary: #fcf9f2;
  --bg-surface: #ffffff;
  --bg-sidebar: #f6efe0;
  --border-color: #e8dcc4;
  --text-main: #2e2111;
  --text-muted: #69533b;
  --accent: #c05621;
  --accent-hover: #9c4215;
  --wood-branch: #5c3826;
}
html[data-theme="farm"][data-mode="dark"] {
  --bg-primary: #18130d;
  --bg-surface: #251c14;
  --bg-sidebar: #1f1710;
  --border-color: #3d2f21;
  --text-main: #fbf5ee;
  --text-muted: #af977e;
  --accent: #dd6b20;
  --accent-hover: #ed8936;
  --wood-branch: #8a573e;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-sans);
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1, h2, h3, .font-serif {
  font-family: var(--font-serif);
}

.theme-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
}
.theme-sidebar {
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
}