@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');

body[data-theme="dark"] {
  /* Replace neutral gray scale with purple-tinted equivalents */
  --colors-gray-50:  #0d0a1a;
  --colors-gray-100: #130f22;
  --colors-gray-200: #1c1630;
  --colors-gray-300: #251d3d;
  --colors-gray-400: #3d2d5e;
  --colors-gray-500: #6b5f85;
  --colors-gray-600: #8a7aaa;
  --colors-gray-700: #a89bc2;
  --colors-gray-800: #c4bade;
  --colors-gray-900: #e0d8f0;

  /* White/black swap */
  --colors-white: #0d0a1a;
  --colors-black: #d4c8e8;

  /* Primary accent  */
  --primary-color:        #a78bfa;
  --primary-color-light:  #c4b5fd;
  --primary-color-dark:   #7c3aed;
  --colors-primary-base:  #a78bfa;
  --colors-primary-light: #c4b5fd;
  --colors-primary-dark:  #7c3aed;
}


/* ═══════════════════════════════════════════
   DARK THEME
   ═══════════════════════════════════════════ */

body[data-theme="dark"] {
  background-color: #0d0a1a !important;
  color: #d4c8e8 !important;
  font-family: 'Cinzel', Georgia, serif;
}

/* Topbar */
body[data-theme="dark"] header,
body[data-theme="dark"] nav,
body[data-theme="dark"] .topbar,
body[data-theme="dark"] [class*="topbar"],
body[data-theme="dark"] [class*="navbar"],
body[data-theme="dark"] [class*="Topbar"],
body[data-theme="dark"] [class*="NavBar"],
body[data-theme="dark"] body > div > header,
body[data-theme="dark"] #root > header,
body[data-theme="dark"] #root > nav {
  background-color: #130f22 !important;
  border-bottom: 1px solid rgba(124,58,237,0.25) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6) !important;
}
body[data-theme="dark"] header a,
body[data-theme="dark"] nav a,
body[data-theme="dark"] .topbar a,
body[data-theme="dark"] [class*="topbar"] a {
  color: #a78bfa !important;
  font-family: 'Cinzel', serif;
}
body[data-theme="dark"] header a:hover,
body[data-theme="dark"] nav a:hover,
body[data-theme="dark"] .topbar a:hover {
  color: #FF9E70 !important;
}
body[data-theme="dark"] [class*="brand"],
body[data-theme="dark"] [class*="Brand"] {
  color: #FF9E70 !important;
  font-family: 'Cinzel', serif;
}

/* Tailwind gray overrides */
body[data-theme="dark"] [class*="bg-gray"],
body[data-theme="dark"] [class*="bg-slate"],
body[data-theme="dark"] [class*="bg-zinc"],
body[data-theme="dark"] [class*="bg-neutral"] {
  background-color: #0d0a1a !important;
}

/* Main content */
body[data-theme="dark"] main,
body[data-theme="dark"] .container,
body[data-theme="dark"] [class*="container"],
body[data-theme="dark"] [class*="wrapper"],
body[data-theme="dark"] [class*="layout"],
body[data-theme="dark"] [class*="page"],
body[data-theme="dark"] #root,
body[data-theme="dark"] #root > div,
body[data-theme="dark"] body > div {
  background-color: #0d0a1a !important;
}

/* Sidebar */
body[data-theme="dark"] .sidebar,
body[data-theme="dark"] aside,
body[data-theme="dark"] [class*="sidebar"],
body[data-theme="dark"] [class*="widget"] {
  background-color: #130f22 !important;
  border: 1px solid rgba(124,58,237,0.2) !important;
  border-radius: 8px !important;
}

/* Idea rows */
body[data-theme="dark"] .idea-item,
body[data-theme="dark"] [class*="idea-item"],
body[data-theme="dark"] [class*="post-item"],
body[data-theme="dark"] [class*="IdeaItem"],
body[data-theme="dark"] [class*="PostItem"] {
  background-color: #0d0a1a !important;
  border-bottom: 1px solid rgba(124,58,237,0.15) !important;
}
body[data-theme="dark"] .idea-item:hover,
body[data-theme="dark"] [class*="idea-item"]:hover {
  background-color: #130f22 !important;
}

/* Vote boxes */
body[data-theme="dark"] [class*="vote"],
body[data-theme="dark"] [class*="Vote"] {
  background-color: #1a1430 !important;
  border: 1px solid rgba(124,58,237,0.35) !important;
  color: #a89bc2 !important;
  border-radius: 6px !important;
  font-family: 'Cinzel', serif;
  box-shadow: none !important;
}
body[data-theme="dark"] [class*="vote"]:hover,
body[data-theme="dark"] [class*="Vote"]:hover {
  background-color: #241b42 !important;
  border-color: rgba(124,58,237,0.6) !important;
  color: #a78bfa !important;
}
body[data-theme="dark"] [class*="vote"] svg,
body[data-theme="dark"] [class*="Vote"] svg {
  color: #6b5f85 !important;
  fill: #6b5f85 !important;
}
body[data-theme="dark"] [class*="vote"]:hover svg {
  color: #a78bfa !important;
  fill: #a78bfa !important;
}

/* Filter / sort bar */
body[data-theme="dark"] [class*="filter"],
body[data-theme="dark"] [class*="Filter"],
body[data-theme="dark"] [class*="sort"],
body[data-theme="dark"] [class*="Sort"],
body[data-theme="dark"] [class*="toolbar"],
body[data-theme="dark"] [class*="Toolbar"] {
  background-color: #130f22 !important;
  border: 1px solid rgba(124,58,237,0.2) !important;
  color: #d4c8e8 !important;
  border-radius: 6px !important;
}

/* Inputs */
body[data-theme="dark"] input,
body[data-theme="dark"] textarea {
  background-color: #1c1630 !important;
  color: #d4c8e8 !important;
  border: 1px solid rgba(124,58,237,0.25) !important;
  border-radius: 6px !important;
}
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
  color: #6b5f85 !important;
}
body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 2px rgba(124,58,237,0.2) !important;
  outline: none !important;
}

/* Titles */
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] [class*="title"],
body[data-theme="dark"] [class*="Title"] {
  color: #FF9E70 !important;
  font-family: 'Cinzel', serif;
}

body[data-theme="dark"] p,
body[data-theme="dark"] li,
body[data-theme="dark"] span {
  color: #a89bc2 !important;
}

body[data-theme="dark"] a               { color: #FF9E70 !important; }
body[data-theme="dark"] a:hover         { color: #a78bfa !important; }

/* Tags */
body[data-theme="dark"] [class*="tag"],
body[data-theme="dark"] [class*="Tag"],
body[data-theme="dark"] [class*="label"],
body[data-theme="dark"] [class*="Label"] {
  background-color: rgba(124,58,237,0.15) !important;
  color: #a78bfa !important;
  border: 1px solid rgba(124,58,237,0.3) !important;
  border-radius: 4px !important;
}

/* Buttons */
body[data-theme="dark"] button[class*="primary"],
body[data-theme="dark"] [class*="button"][class*="primary"] {
  background-color: #7c3aed !important;
  color: #fff !important;
  font-family: 'Cinzel', serif;
  border: none !important;
}
body[data-theme="dark"] button[class*="primary"]:hover {
  background-color: #FF9E70 !important;
  color: #1a0e00 !important;
}
body[data-theme="dark"] button:not([class*="primary"]):not([class*="vote"]):not([class*="Vote"]),
body[data-theme="dark"] [class*="button"]:not([class*="primary"]):not([class*="vote"]) {
  background-color: #1c1630 !important;
  color: #d4c8e8 !important;
  border: 1px solid rgba(124,58,237,0.25) !important;
  font-family: 'Cinzel', serif;
}

/* Dividers / footer */
body[data-theme="dark"] hr,
body[data-theme="dark"] .divider {
  border-color: rgba(124,58,237,0.2) !important;
}
body[data-theme="dark"] footer,
body[data-theme="dark"] [class*="footer"],
body[data-theme="dark"] [class*="Footer"] {
  background-color: #130f22 !important;
  border-top: 1px solid rgba(124,58,237,0.2) !important;
  color: #6b5f85 !important;
}

/* ═══════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════ */

body[data-theme="light"] {
  background-color: #F6F2E9 !important;
  color: #2B2B2B !important;
  font-family: 'Cinzel', Georgia, serif;
}

body[data-theme="light"] header,
body[data-theme="light"] nav,
body[data-theme="light"] .topbar,
body[data-theme="light"] [class*="topbar"],
body[data-theme="light"] [class*="navbar"] {
  background-color: #EDE8DC !important;
  border-bottom: 1px solid rgba(74,45,134,0.2) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
body[data-theme="light"] header a,
body[data-theme="light"] nav a,
body[data-theme="light"] .topbar a {
  color: #4A2D86 !important;
}
body[data-theme="light"] header a:hover,
body[data-theme="light"] nav a:hover {
  color: #D4792A !important;
}
body[data-theme="light"] [class*="brand"],
body[data-theme="light"] [class*="Brand"] {
  color: #D4792A !important;
  font-family: 'Cinzel', serif;
}

body[data-theme="light"] main,
body[data-theme="light"] .container,
body[data-theme="light"] [class*="container"],
body[data-theme="light"] [class*="wrapper"],
body[data-theme="light"] [class*="layout"],
body[data-theme="light"] #root,
body[data-theme="light"] #root > div {
  background-color: #F6F2E9 !important;
}

body[data-theme="light"] .sidebar,
body[data-theme="light"] aside,
body[data-theme="light"] [class*="sidebar"] {
  background-color: #EDE8DC !important;
  border: 1px solid rgba(74,45,134,0.2) !important;
  border-radius: 8px !important;
}

body[data-theme="light"] .idea-item,
body[data-theme="light"] [class*="idea-item"],
body[data-theme="light"] [class*="post-item"] {
  background-color: #F6F2E9 !important;
  border-bottom: 1px solid rgba(74,45,134,0.12) !important;
}
body[data-theme="light"] .idea-item:hover,
body[data-theme="light"] [class*="idea-item"]:hover {
  background-color: #EDE8DC !important;
}

body[data-theme="light"] [class*="vote"],
body[data-theme="light"] [class*="Vote"] {
  background-color: #FFFDF7 !important;
  border: 1px solid rgba(74,45,134,0.3) !important;
  color: #4A2D86 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
body[data-theme="light"] [class*="vote"]:hover,
body[data-theme="light"] [class*="Vote"]:hover {
  background-color: #EDE8DC !important;
  border-color: #4A2D86 !important;
}
body[data-theme="light"] [class*="vote"] svg,
body[data-theme="light"] [class*="Vote"] svg {
  color: #888 !important;
  fill: #888 !important;
}
body[data-theme="light"] [class*="vote"]:hover svg {
  color: #4A2D86 !important;
  fill: #4A2D86 !important;
}

body[data-theme="light"] [class*="filter"],
body[data-theme="light"] [class*="sort"],
body[data-theme="light"] [class*="toolbar"] {
  background-color: #EDE8DC !important;
  border: 1px solid rgba(74,45,134,0.2) !important;
  color: #2B2B2B !important;
  border-radius: 6px !important;
}

body[data-theme="light"] input,
body[data-theme="light"] textarea {
  background-color: #FFFDF7 !important;
  color: #2B2B2B !important;
  border: 1px solid rgba(74,45,134,0.25) !important;
  border-radius: 6px !important;
}
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder {
  color: #888 !important;
}
body[data-theme="light"] input:focus,
body[data-theme="light"] textarea:focus {
  border-color: #4A2D86 !important;
  box-shadow: 0 0 0 2px rgba(74,45,134,0.15) !important;
  outline: none !important;
}

body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3,
body[data-theme="light"] [class*="title"],
body[data-theme="light"] [class*="Title"] {
  color: #D4792A !important;
  font-family: 'Cinzel', serif;
}
body[data-theme="light"] p,
body[data-theme="light"] li,
body[data-theme="light"] span {
  color: #555555 !important;
}
body[data-theme="light"] a               { color: #D4792A !important; }
body[data-theme="light"] a:hover         { color: #4A2D86 !important; }

body[data-theme="light"] [class*="tag"],
body[data-theme="light"] [class*="Tag"],
body[data-theme="light"] [class*="label"],
body[data-theme="light"] [class*="Label"] {
  background-color: rgba(74,45,134,0.1) !important;
  color: #4A2D86 !important;
  border: 1px solid rgba(74,45,134,0.2) !important;
  border-radius: 4px !important;
}

body[data-theme="light"] button[class*="primary"],
body[data-theme="light"] [class*="button"][class*="primary"] {
  background-color: #4A2D86 !important;
  color: #fff !important;
  font-family: 'Cinzel', serif;
  border: none !important;
}
body[data-theme="light"] button[class*="primary"]:hover {
  background-color: #D4792A !important;
  color: #fff !important;
}
body[data-theme="light"] button:not([class*="primary"]):not([class*="vote"]):not([class*="Vote"]),
body[data-theme="light"] [class*="button"]:not([class*="primary"]):not([class*="vote"]) {
  background-color: #EDE8DC !important;
  color: #2B2B2B !important;
  border: 1px solid rgba(74,45,134,0.2) !important;
  font-family: 'Cinzel', serif;
}

body[data-theme="light"] hr,
body[data-theme="light"] .divider {
  border-color: rgba(74,45,134,0.15) !important;
}
body[data-theme="light"] footer,
body[data-theme="light"] [class*="footer"],
body[data-theme="light"] [class*="Footer"] {
  background-color: #EDE8DC !important;
  border-top: 1px solid rgba(74,45,134,0.2) !important;
  color: #888 !important;
}