/* ============================================================
   cdc-dark.css  —  Infra-native dark theme (shared override)
   Load AFTER the Tailwind CDN script on every page:
     <link rel="stylesheet" href="/assets/cdc-dark.css" />
   Remaps the site's stone/white Tailwind utilities to the dark
   palette used by the homepage. No HTML rewrites needed.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --cdc-bg:#0a0a0a; --cdc-panel:#0e0d0c; --cdc-panel2:#100f0e;
  --cdc-line:#1f1d1b; --cdc-line2:#292524;
  --cdc-fg:#fafaf9; --cdc-body:#bdb8b2; --cdc-mut:#a8a29e; --cdc-mut2:#78716c;
  --cdc-amber:#fbbf24; --cdc-green:#34d399;
}

/* ---- base ---- */
body{
  font-family:'Inter',system-ui,sans-serif !important;
  background-color:var(--cdc-bg) !important;
  color:var(--cdc-body) !important;
  background-image:linear-gradient(rgba(120,113,108,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,113,108,.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-font-smoothing:antialiased;
}

/* ---- surfaces ---- */
.bg-stone-50{ background-color:var(--cdc-bg) !important; }
.bg-white{ background-color:var(--cdc-panel) !important; }
.bg-stone-100{ background-color:#161412 !important; }
.bg-stone-900{ background-color:var(--cdc-panel2) !important; }
.bg-stone-800{ background-color:#1c1a18 !important; }
.hover\:bg-stone-50:hover{ background-color:#161412 !important; }
.hover\:bg-stone-700:hover,
.hover\:bg-stone-800:hover{ background-color:#211f1c !important; }

/* ---- text ---- */
.text-stone-900,.text-stone-800{ color:var(--cdc-fg) !important; }
.text-stone-700,.text-stone-600{ color:var(--cdc-body) !important; }
.text-stone-500{ color:var(--cdc-mut) !important; }
.text-stone-400{ color:var(--cdc-mut2) !important; }
.text-blue-700{ color:var(--cdc-amber) !important; }
.hover\:text-stone-600:hover{ color:var(--cdc-fg) !important; }
.hover\:text-stone-200:hover,
.hover\:text-stone-300:hover,
.hover\:text-white:hover{ color:var(--cdc-fg) !important; }

/* ---- borders ---- */
.border-stone-100,.border-stone-200{ border-color:var(--cdc-line) !important; }
.border-stone-300{ border-color:var(--cdc-line2) !important; }
.border-stone-700,.border-stone-800{ border-color:var(--cdc-line) !important; }
.divide-stone-200 > * + *{ border-color:var(--cdc-line) !important; }

/* ---- nav + chrome accents ---- */
nav, header.bg-stone-950, footer{ background-color:var(--cdc-bg) !important; }
nav.bg-stone-950{ background-color:rgba(10,10,10,.85) !important; backdrop-filter:blur(10px); }
/* site wordmark + guide nav links in mono */
nav a[href="/"], header a[href="../"], header a[href="./"]{
  font-family:'JetBrains Mono',ui-monospace,monospace !important;
  letter-spacing:.3px;
}
/* pillar hero eyebrow + section labels pick up the amber accent */
header .uppercase, .tracking-wider.uppercase, .tracking-widest{ color:var(--cdc-amber) !important; }
header .uppercase{ font-family:'JetBrains Mono',ui-monospace,monospace !important; }

/* category dots on the portal collapse to a single amber tone */
.text-amber-500,.text-orange-500,.text-red-500,.text-indigo-500,.text-sky-500,.text-teal-500{ color:var(--cdc-amber) !important; }

/* links inside prose-free contexts */
a.text-blue-700:hover{ color:#ffd24d !important; }

/* code */
code{ color:var(--cdc-amber) !important; }

/* FAQ +/- icon */
.faq-icon{ color:var(--cdc-amber) !important; }

/* dashed "coming soon" cards read as muted panels */
.border-dashed{ background-color:transparent !important; }

/* ---- Tailwind Typography (prose) on guide pages ---- */
.prose{
  --tw-prose-body:#c2bdb7 !important;
  --tw-prose-headings:#fafaf9 !important;
  --tw-prose-lead:#a8a29e !important;
  --tw-prose-links:#fbbf24 !important;
  --tw-prose-bold:#fafaf9 !important;
  --tw-prose-counters:#a8a29e !important;
  --tw-prose-bullets:#57534e !important;
  --tw-prose-hr:#1f1d1b !important;
  --tw-prose-quotes:#e7e5e4 !important;
  --tw-prose-quote-borders:#fbbf24 !important;
  --tw-prose-captions:#78716c !important;
  --tw-prose-code:#fbbf24 !important;
  --tw-prose-pre-code:#e7e5e4 !important;
  --tw-prose-pre-bg:#161412 !important;
  --tw-prose-th-borders:#292524 !important;
  --tw-prose-td-borders:#1f1d1b !important;
}
/* Belt-and-suspenders: also set colors directly in case the plugin's
   variables are unavailable (e.g. typography plugin not loaded). */
.prose{ color:#c2bdb7 !important; }
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6,.prose strong{ color:#fafaf9 !important; }
.prose a{ color:#fbbf24 !important; }
.prose h1,.prose h2,.prose h3,.prose h4{ letter-spacing:-.3px; }
.prose h2{ border-bottom:1px solid var(--cdc-line); padding-bottom:.3em; }
.prose pre{ border:1px solid var(--cdc-line2); }
.prose :where(code):not(:where(pre code)){
  background:#161412; border:1px solid var(--cdc-line2);
  padding:1px 6px; border-radius:5px; font-weight:500;
}
.prose :where(code):not(:where(pre code))::before,
.prose :where(code):not(:where(pre code))::after{ content:none !important; }
.prose a{ text-underline-offset:3px; }
.prose blockquote{ font-style:normal; }
.prose table{ font-size:.9em; }
.prose thead th{ color:var(--cdc-fg); }

/* loading placeholder */
#content .italic{ color:var(--cdc-mut2) !important; }