/* =======================================================================
   RunCabin dark theme
   -----------------------------------------------------------------------
   Flips the light marketing palette to the deep-slate + blue/cyan look
   used by the AI builder, so "dark" is the default across the site.

   Usage: link this AFTER /tailwind.css AND after a page's own inline
   <style> block (i.e. last thing in <head>) so its rules win, and set the
   shared nav to its dark variant: <div id="site-nav" data-theme="dark" ...>.

   Reversible: remove the <link> from a page to restore its light look.
   Palette + accent values match wwwroot/ai-build/index.html.
   ======================================================================= */

/* ---- Page background (beats body.bg-white and about.html's inline
        purple gradient via the `background` shorthand + !important) ---- */
body { background: #0f172a !important; color: #e2e8f0 !important; }

/* ---- Surfaces / layering ---- */
.bg-white:not(body) { background-color: #1e293b !important; }   /* cards / panels */
.bg-gray-50         { background-color: #131d33 !important; }   /* alt sections */
.bg-gray-100        { background-color: #243349 !important; }
.bg-gray-950        { background-color: #0b1220 !important; }   /* hero / footer bands */
.bg-gray-900        { background-color: #0f172a !important; }
/* light-tint gradient sections/cards (from-indigo-50 -> white / purple-50):
   drop the gradient image and use a flat slate */
.from-indigo-50     { background-image: none !important; background-color: #131d33 !important; }

/* ---- Text ---- */
.text-gray-900, .text-black { color: #f1f5f9 !important; }
.text-gray-800 { color: #e2e8f0 !important; }
.text-gray-700 { color: #cbd5e1 !important; }
.text-gray-600 { color: #94a3b8 !important; }
.text-gray-500 { color: #94a3b8 !important; }
.text-gray-400 { color: #64748b !important; }
.text-gray-300 { color: #cbd5e1 !important; }
.text-gray-200 { color: #e2e8f0 !important; }
.text-gray-100 { color: #f1f5f9 !important; }

/* ---- Borders ---- */
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: rgba(255,255,255,0.10) !important; }
.border-indigo-100 { border-color: rgba(56,189,248,0.16) !important; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255,255,255,0.08) !important; }

/* ---- Placeholders ---- */
.placeholder-gray-500::placeholder { color: #64748b !important; }

/* ---- Accent: indigo family -> blue / cyan ---- */
.text-indigo-700, .text-indigo-600, .text-indigo-500 { color: #38bdf8 !important; }
.text-indigo-400, .text-indigo-300 { color: #7dd3fc !important; }
.text-indigo-200 { color: #bae6fd !important; }
.text-indigo-100 { color: #e0f2fe !important; }
.text-indigo-300\/60 { color: rgba(125,211,252,0.60) !important; }
.text-indigo-300\/40 { color: rgba(125,211,252,0.40) !important; }
.text-indigo-200\/80 { color: rgba(186,230,253,0.80) !important; }

.bg-indigo-600 { background-color: #2563eb !important; }
.bg-indigo-500 { background-color: #2563eb !important; }
.bg-indigo-100 { background-color: rgba(37,99,235,0.16) !important; }
.bg-indigo-50  { background-color: rgba(37,99,235,0.10) !important; }
.bg-indigo-50\/40  { background-color: rgba(37,99,235,0.08) !important; }
.bg-indigo-600\/20 { background-color: rgba(37,99,235,0.20) !important; }
.bg-indigo-900\/90 { background-color: rgba(15,23,42,0.90) !important; }
.bg-indigo-950\/30 { background-color: rgba(2,6,23,0.30) !important; }

.border-indigo-200, .border-indigo-300 { border-color: #38bdf8 !important; }
.border-indigo-400, .border-indigo-500, .border-indigo-700 { border-color: #2563eb !important; }
.border-indigo-400\/30 { border-color: rgba(56,189,248,0.30) !important; }
.border-indigo-400\/50 { border-color: rgba(56,189,248,0.50) !important; }

.hover\:text-indigo-300:hover, .hover\:text-indigo-600:hover { color: #7dd3fc !important; }

/* ---- Buttons / gradient text (override each page's inline indigo defs) ---- */
.btn-primary { background: linear-gradient(135deg, #2563eb, #06b6d4) !important; color: #fff !important; }
.btn-secondary { background: transparent !important; border: 2px solid #2563eb !important; color: #7dd3fc !important; }
.btn-secondary:hover { background: #2563eb !important; color: #fff !important; }
.gradient-text, .step-num {
    background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ---- Shared dark nav (data-theme="dark") -> slate instead of #0f0c29 ---- */
nav[data-runcabin-nav] { background-color: #0f172a !important; }
#rc-mobile-nav { background-color: #0f172a !important; }
