/* StackProtocol — Article Override System
   Loads after Tailwind CDN to restyle all article pages.
   Performance black: DM Mono headings, Playfair accents, electric blue + amber.
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --bg: #0a0a0a;
  --surface: #121212;
  --border: #1e1e1e;
  --accent: #4D9DE0;
  --accent2: #E8A838;
  --accent-dim: rgba(77,157,224,0.10);
  --text: #e8e8e8;
  --muted: #6b6b6b;
  --mono: 'DM Mono', monospace;
  --serif: 'Playfair Display', 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;
}

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 {
  font-family: var(--serif) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

h2, h3 {
  font-family: var(--mono) !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

h4, h5, h6 {
  font-family: var(--mono) !important;
  color: var(--accent2) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.85em !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 {
  color: var(--accent2) !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, 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"] {
  background: var(--accent) !important;
  color: #000 !important;
  border: none !important;
  font-family: var(--mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}
button:hover, [class*="btn"]:hover {
  background: var(--accent2) !important;
}

/* ── Tables ── */
table {
  border-collapse: collapse !important;
  width: 100% !important;
  background: var(--surface) !important;
  font-family: var(--sans) !important;
}
th {
  background: rgba(77,157,224,0.08) !important;
  color: var(--accent) !important;
  font-family: var(--mono) !important;
  font-weight: 500 !important;
  font-size: 0.8em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 16px !important;
}
td {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--border) !important;
}
tr:hover td {
  background: rgba(77,157,224,0.04) !important;
}

/* ── Blockquote ── */
blockquote {
  border-left: 3px solid var(--accent2) !important;
  background: rgba(232,168,56,0.06) !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  font-family: var(--mono) !important;
  font-size: 0.95em !important;
}

/* ── Code ── */
code, pre {
  background: var(--surface) !important;
  color: var(--accent) !important;
  font-family: var(--mono) !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;
  font-family: var(--mono) !important;
}

/* ── 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;
  font-family: var(--mono) !important;
}

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