/* floodguide DESIGN_SYSTEM dark tokens (v9 phase6 spec) */
:root {
  --bg: #0b0d10;
  --surface: #141619;
  --surface-2: #1b1e23;
  --text: #e8eaed;
  --text-secondary: #a8b3c2;
  --accent: #06b6d4;
  --border: rgba(6, 182, 212, 0.18);
  --warning: #f59e0b;
  --danger: #ef4444;
  --ok: #22c55e;
}

/* force the dark palette regardless of quark2 light/dark auto-detection */
html, html[data-theme='light'], html[data-theme='dark'] {
  background: var(--bg);
}
body {
  background: var(--bg);
  color: var(--text);
}
body, .body, section, article, main {
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); }
a:hover { color: var(--accent); filter: brightness(1.15); }
h1, h2, h3, h4 { color: var(--text); }

/* cards / panels for guide data */
.fg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 10px 0;
}
.fg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.fg-stat { font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.fg-label { color: var(--text-secondary); font-size: .9rem; }
.fg-ok { color: var(--ok); }
.fg-warn { color: var(--warning); }
.fg-danger { color: var(--danger); }
.fg-deeplink {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
  border-radius: 8px;
  padding: 8px 14px;
  margin: 4px 6px 4px 0;
  text-decoration: none;
}
.fg-deeplink:hover { background: var(--accent); color: #06232a; }

/* quark2 header/footer surface alignment for the forced dark look */
#header, header, nav, footer, #footer {
  background: var(--surface) !important;
  color: var(--text);
}

/* quark2 light-surface neutralization (pilot polish): map content surfaces to dark tokens */
#body-wrapper, .section, article, main, .card, .content-wrapper, .blog-content {
  background: var(--bg) !important;
  color: var(--text) !important;
}
#body-wrapper h1, #body-wrapper h2, #body-wrapper h3, article h1, article h2, article h3 {
  color: var(--text) !important;
}
:not(pre) > code, pre {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}