/* GLP-1 Explained — Article Override System
   Loads after Tailwind CDN to restyle all article pages.
   Clinical dark charcoal: Fraunces headings, DM Sans body, teal accent.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --bg: #111417;
  --surface: #1a1e24;
  --border: #252a32;
  --accent: #3BBFAD;
  --accent-dim: rgba(59,191,173,0.12);
  --text: #e4e8ec;
  --muted: #8a9099;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}

/* ── Reset purple/gradient defaults ── */
body, html {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
}

/* Kill all purple/blue/gradient backgrounds */
body *, [class*="bg-purple"], [class*="bg-indigo"],
[class*="bg-blue"], [class*="from-purple"], [class*="to-indigo"],
[class*="gradient"], .hero, header, nav {
  background-image: none !important;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

p, li, td, th, blockquote, span {
  font-family: var(--sans) !important;
  color: var(--text) !important;
  line-height: 1.75 !important;
}

a {
  color: var(--accent) !important;
  text-decoration: none !important;
}
a:hover {
  text-decoration: underline !important;
}

/* ── Page background ── */
[class*="bg-white"], [class*="bg-gray-50"], [class*="bg-gray-100"],
[class*="bg-slate"], .bg-white, .bg-gray-50 {
  background: var(--bg) !important;
}

[class*="bg-gray-800"], [class*="bg-gray-900"],
[class*="bg-slate-800"], [class*="bg-slate-900"] {
  background: var(--surface) !important;
}

/* ── Cards and containers ── */
[class*="rounded"], [class*="card"], article, .prose,
[class*="shadow"], [class*="border"] {
  border-color: var(--border) !important;
}

/* Prose content area */
.prose, article, main, [class*="content"], [class*="article"] {
  max-width: 720px !important;
  margin: 0 auto !important;
  background: transparent !important;
}

/* ── Accent elements ── */
[class*="text-purple"], [class*="text-indigo"], [class*="text-blue"],
[class*="text-violet"] {
  color: var(--accent) !important;
}

[class*="border-purple"], [class*="border-indigo"], [class*="border-blue"] {
  border-color: var(--accent) !important;
}

[class*="bg-purple"], [class*="bg-indigo"], [class*="bg-blue"] {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
}

/* ── Buttons ── */
button, [class*="btn"], [role="button"],
[class*="bg-purple"] a, [class*="bg-indigo"] a {
  background: var(--accent) !important;
  color: #0a0f14 !important;
  border: none !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
}
button:hover, [class*="btn"]:hover {
  opacity: 0.88 !important;
}

/* ── Tables ── */
table {
  border-collapse: collapse !important;
  width: 100% !important;
  background: var(--surface) !important;
}
th {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
}
td {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--border) !important;
}
tr:hover td {
  background: rgba(255,255,255,0.02) !important;
}

/* ── Blockquote ── */
blockquote {
  border-left: 3px solid var(--accent) !important;
  background: var(--accent-dim) !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  border-radius: 0 6px 6px 0 !important;
}

/* ── Code ── */
code, pre {
  background: var(--surface) !important;
  color: var(--accent) !important;
  font-family: 'DM Mono', monospace !important;
  border: 1px solid var(--border) !important;
}

/* ── Navigation ── */
nav, header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}
nav a, header a {
  color: var(--text) !important;
}

/* ── Kill emoji in headings (fallback for any CSS that can handle it) ── */
/* Emoji stripping is handled by patch-articles.py at build time */

/* ── Muted text ── */
[class*="text-gray"], [class*="text-slate"], [class*="text-muted"] {
  color: var(--muted) !important;
}

/* ── Input / form ── */
input, textarea, select {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--muted) !important;
}

/* ── Footer ── */
footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}