/* =============================================================
   Mandelbrot LLC — Dark Mode Overrides
   Link AFTER style.css to override custom properties
   ============================================================= */

:root {
  /* Backgrounds */
  --color-bg:           #111827;
  --color-bg-alt:       #1a2233;
  --color-bg-dark:      #060a12;
  --color-bg-dark-2:    #0e1624;

  /* Text */
  --color-text:         #e2e8f0;
  --color-text-muted:   #94a3b8;
  --color-text-inverse: #e2e8f0;

  /* Accent — brighter blue for dark backgrounds */
  --color-accent:       #3b82f6;
  --color-accent-hover: #60a5fa;

  /* Borders */
  --color-border:       #1e2d40;
  --color-border-dark:  #253347;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
}

/* Header */
.site-header {
  background: var(--color-bg);
  border-bottom-color: var(--color-border);
}

/* Keep icon backgrounds a solid darker blue so white text stays readable */
.feature-card__icon {
  background: #1d4ed8;
}

/* Feature cards: add a slightly lighter bg so they read as surfaces */
.feature-card {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}

.section--alt .feature-card {
  background: var(--color-bg-alt);
}

/* Callout block */
.callout {
  background: var(--color-bg-alt);
}

/* Stat bar */
.stat-bar,
.stat-bar__item {
  border-color: var(--color-border);
}

/* Style guide swatches */
.tpl-swatch__name {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.tpl-swatch {
  border-color: var(--color-border);
}

/* Blockquote — white text on dark backgrounds */
blockquote {
  color: #fff;
}

blockquote cite {
  color: rgba(255,255,255,.6);
}

/* Blog cards */
.blog-card {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}

.section--alt .blog-card {
  background: var(--color-bg-alt);
}

.blog-card__title a {
  color: var(--color-text);
}

/* CTA banner — keep accent bg, just check contrast */
.cta-banner .btn--primary {
  color: #1d4ed8; /* keep dark text on white button regardless of accent var */
}

/* Comparison banner */
.compare-banner {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}