:root {
  --bg-main: #121212;        /* true dark gray */
  --bg-card: #1e1e1e;        /* neutral card */
  --bg-hover: #2a2a2a;       /* hover state */
  --text-primary: #e5e5e5;   /* soft white */
  --text-secondary: #a3a3a3; /* muted gray */
  --accent: #3b82f6;         /* optional blue accent (can change) */
  --border: #2a2a2a;
}

/* Global background */
html, body, #__next, main {
  background-color: #121212 !important; /* true dark gray */
}

/* Ensure containers don't override it */
div[class*="container"],
div[class*="layout"],
div[class*="page"] {
  background-color: #121212 !important;
}

/* Cards / widgets */
.card,
.widget,
.item {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
}

/* Hover effect */
.card:hover,
.widget:hover,
.item:hover {
  background-color: var(--bg-hover) !important;
  transform: translateY(-2px);
}

/* Titles */
h1, h2, h3, h4 {
  color: var(--text-primary) !important;
  font-weight: 500;
}

/* Secondary text */
p, span, .description {
  color: var(--text-secondary) !important;
}

/* Links */
a {
  color: var(--accent) !important;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Inputs / search bars */
input, textarea {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: 8px;
}

/* Scrollbar (optional but nice) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-hover);
  border-radius: 8px;
}