:root {
  --bg-main: #f8f8f5;
  --bg-card: #ffffff;
  --bg-soft: #f8f8f5;

  --text-main: #2b2b2b;
  --text-muted: #676f54;

  --border-color: #ececec;

  --primary: #79b4a9;
  --secondary: #676f54;
  --gold: #d4af37;
}

body.dark-theme {
  --bg-main: #161816;
  --bg-card: #222522;
  --bg-soft: #2b2f2b;

  --text-main: #f5f5f5;
  --text-muted: #c7d2c2;

  --border-color: #3a3f3a;
}

body {
  background: var(--bg-main);
  color: var(--text-main);
}

.navbar,
.feed-main,
.post-card,
.sidebar-left,
.sidebar-right,
.profile-card {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
}

.create-post textarea,
input,
textarea {
  background: var(--bg-soft);
  color: var(--text-main);
}

body.dark-theme {
  background: #161816 !important;
  color: #ffffff !important;
}

body.dark-theme .navbar,
body.dark-theme .feed-main,
body.dark-theme .sidebar-left,
body.dark-theme .sidebar-right,
body.dark-theme .post-card,
body.dark-theme .create-post-card {
  background: #222522 !important;
  color: #ffffff !important;
  border-color: #3a3f3a !important;
}

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme p,
body.dark-theme span,
body.dark-theme a {
  color: #ffffff !important;
}

body.dark-theme input,
body.dark-theme textarea {
  background: #2b2f2b !important;
  color: #ffffff !important;
  border-color: #3a3f3a !important;
}

body.dark-theme,
body.dark-theme * {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.dark-theme {
  background: #161816 !important;
  color: #ffffff !important;
}

body.dark-theme .navbar,
body.dark-theme .feed-main,
body.dark-theme .post-card,
body.dark-theme .create-post-card,
body.dark-theme .sidebar-left,
body.dark-theme .sidebar-right,
body.dark-theme .profile-card,
body.dark-theme .suggested-community-card,
body.dark-theme .trend-card,
body.dark-theme .notification-dropdown,
body.dark-theme .profile-dropdown {
  background: #222522 !important;
  color: #ffffff !important;
  border-color: #3a3f3a !important;
}

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme p,
body.dark-theme span,
body.dark-theme a,
body.dark-theme strong {
  color: #ffffff !important;
}

body.dark-theme input,
body.dark-theme textarea {
  background: #2b2f2b !important;
  color: #ffffff !important;
  border-color: #3a3f3a !important;
}