/* vyrex.co LeafWiki theme — dark surface is #25262C */

:root,
.dark {
  color-scheme: dark;

  --background: 231.43 8.64% 15.88%;
  --page-surface: 231.43 8.64% 15.88%;
  --foreground: 225 9% 91%;
  --card: 233 8% 18%;
  --card-foreground: 240 11% 97%;
  --popover: 231 10% 12%;
  --popover-foreground: 225 9% 91%;
  --primary: 220 10% 62%;
  --primary-foreground: 0 0% 100%;
  --secondary: 233 8% 21%;
  --secondary-foreground: 240 11% 97%;
  --accent: 233 8% 21%;
  --accent-foreground: 240 11% 97%;
  --destructive: 356 56% 32%;
  --destructive-foreground: 0 0% 100%;
  --border: 234 8% 25%;
  --input: 234 8% 22%;
  --ring: 220 10% 62%;

  --surface: 231 10% 12%;
  --surface-alt: 233 8% 18%;
  --surface-border: 234 8% 25%;
  --interface-text: 228 7% 71%;

  --brand: 220 10% 62%;
  --brand-dark: 234 9% 25%;
  --brand-light: 215 19% 82%;

  --tooltip: 233 8% 18%;
  --tooltip-border: 234 8% 25%;

  --muted: 228 7% 71%;
  --muted-surface: 233 8% 21%;
  --muted-foreground: 228 7% 71%;

  --markdown-toolbar: 231 10% 13%;
  --markdown-toolbar-border: 234 8% 25%;
  --markdown-toolbar-text: 228 7% 71%;

  --tree-node-hover: 233 8% 21%;
  --scrollbar-thumb: 230 6% 40%;
  --scrollbar-thumb-hover: 228 7% 55%;
  --table-header-border: 234 8% 25%;
}

html,
body,
#root,
#root > div,
[data-theme="dark"] {
  background-color: #25262c !important;
  color: #e6e7ea;
}

.bg-background,
.bg-page,
[class*="bg-background"] {
  background-color: #25262c !important;
}

html {
  color-scheme: dark;
}

a {
  color: #c9d0da;
}

a:hover {
  color: #ffffff;
}

img {
  max-width: 100%;
  height: auto;
}

.markdown-body img,
article img,
.prose img {
  border: 1px solid #3c3d46;
  border-radius: 8px;
  background: #2b2c33;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 8px 0 28px;
}

@media (min-width: 800px) {
  .home-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.home-card {
  display: block;
  background: #2b2c33 !important;
  border: 1px solid #3c3d46 !important;
  border-radius: 12px;
  padding: 22px 24px;
  text-decoration: none !important;
  color: #e6e7ea !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.home-card:hover {
  background: #32333b !important;
  border-color: #5a5c68 !important;
  color: #f5f5f7 !important;
}

.home-card-kicker {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b0b2ba !important;
  margin-bottom: 8px;
}

.home-card-title {
  display: block;
  color: #f5f5f7 !important;
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 8px;
  line-height: 1.3;
}

.home-card-text {
  display: block;
  color: #b0b2ba !important;
  margin: 0;
  line-height: 1.5;
}

.vps-note {
  background: #4a1418 !important;
  border-left: 6px solid #8b1e28 !important;
  border-radius: 10px;
  color: #f7e4e4 !important;
  padding: 14px 20px !important;
  margin: 8px 0 22px !important;
}

.vps-note,
.vps-note *,
.vps-note li,
.vps-note p {
  color: #f7e4e4 !important;
}

.vps-note strong {
  color: #fff !important;
}

.vps-note a {
  color: #ffc4bc !important;
  text-decoration: underline;
}

.vyrex-promo {
  background: #2e3038 !important;
  border-left: 6px solid #6e7380 !important;
  border-radius: 10px;
  color: #e6e7ea !important;
  padding: 12px 20px !important;
  margin: 16px 0 !important;
}

.vyrex-promo a {
  color: #fff !important;
  font-weight: 600;
}