@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap');

/* ===== BASE ===== */
body { font-family: 'Plus Jakarta Sans', sans-serif; transition: background-color 0.3s, color 0.3s; }
:root { --nav-bg: rgba(255,255,255,0.75); }

/* ===== DARK THEME - BASE ===== */
body.dark-theme { --nav-bg: rgba(30,41,59,0.75); background-color: #0f172a; color: #f1f5f9; }
.glass-nav { backdrop-filter: blur(14px); background-color: var(--nav-bg); }
body.dark-theme .glass-nav { border-color: #334155; }
body.dark-theme .bg-white { background-color: #1e293b !important; }
body.dark-theme .border-slate-200 { border-color: #334155 !important; }
body.dark-theme .text-slate-900 { color: #f1f5f9 !important; }
body.dark-theme .text-slate-700, body.dark-theme .text-slate-800 { color: #e2e8f0 !important; }
body.dark-theme .text-slate-500, body.dark-theme .text-slate-600 { color: #94a3b8 !important; }
body.dark-theme .bg-slate-50 { background-color: #0f172a !important; }
body.dark-theme .bg-slate-100 { background-color: #1e293b !important; }

/* ===== DARK THEME - MOBILE MENU ===== */
body.dark-theme #mobileMenu { background-color: #1e293b !important; border-color: #334155; }
body.dark-theme #mobileMenu span,
body.dark-theme #mobileMenu .text-slate-800 { color: #f1f5f9 !important; }
body.dark-theme #mobileMenu a.text-slate-700 { color: #cbd5e1 !important; }
body.dark-theme #mobileMenu button { background: #334155 !important; color: #94a3b8 !important; }

/* ===== DARK THEME - PROSE ===== */
body.dark-theme .prose-content { color: #e2e8f0; }
body.dark-theme .prose-content h2 { color: #f1f5f9; }
body.dark-theme .prose-content h3 { color: #e2e8f0; }
body.dark-theme .prose-content p, body.dark-theme .prose-content ul li { color: #94a3b8; }

/* ===== DARK THEME - INFO BOX ===== */
body.dark-theme .info-box { background: #1e293b !important; border-color: #4f46e5 !important; }
body.dark-theme .info-box p, body.dark-theme .info-box .text-slate-700 { color: #94a3b8 !important; }

/* ===== DARK THEME - COMMAND CARDS ===== */
body.dark-theme .command-card { background: #1e293b !important; border-color: #334155 !important; }
body.dark-theme .command-card h3 { color: #e2e8f0 !important; }
body.dark-theme .command-card p { color: #94a3b8 !important; }

/* ===== DARK THEME - COMPARISON TABLE ===== */
body.dark-theme .comparison-table td { color: #cbd5e1 !important; border-color: #334155 !important; }
body.dark-theme .comparison-table td.font-semibold,
body.dark-theme .comparison-table .text-slate-700 { color: #e2e8f0 !important; }
body.dark-theme .comparison-table tr:hover td { background: #1e293b !important; }

/* ===== DARK THEME - CHOICE CARDS ===== */
body.dark-theme .choice-card.bg-green-50 { background: #052e16 !important; border-color: #166534 !important; }
body.dark-theme .choice-card.bg-green-50 h3 { color: #86efac !important; }
body.dark-theme .choice-card.bg-green-50 ul li { color: #4ade80 !important; }
body.dark-theme .choice-card.bg-indigo-50 { background: #1e1b4b !important; border-color: #3730a3 !important; }
body.dark-theme .choice-card.bg-indigo-50 h3 { color: #a5b4fc !important; }
body.dark-theme .choice-card.bg-indigo-50 ul li { color: #818cf8 !important; }

/* ===== DARK THEME - FEATURE CARDS ===== */
body.dark-theme .feature-card { background: #1e1b4b !important; border-color: #3730a3 !important; }
body.dark-theme .feature-card h3 { color: #a5b4fc !important; }
body.dark-theme .feature-card p { color: #94a3b8 !important; }

/* ===== DARK THEME - TIP CARDS ===== */
body.dark-theme .tip-card { background: #1c1400 !important; border-color: #92400e !important; }
body.dark-theme .tip-card .text-amber-800,
body.dark-theme .tip-card p.font-bold { color: #fcd34d !important; }
body.dark-theme .tip-card .text-amber-700 { color: #fbbf24 !important; }

/* ===== DARK THEME - STEP NUMBERS ===== */
body.dark-theme .step-number.bg-amber-100 { background: #1c1400 !important; color: #fcd34d !important; }
body.dark-theme .step-number.bg-orange-100 { background: #1a0c00 !important; color: #fb923c !important; }

/* ===== DARK THEME - METRIC CARDS ===== */
body.dark-theme .metric-card { background: #052e16 !important; border-color: #166534 !important; }
body.dark-theme .metric-card[style*="eff6ff"] { background: #1e1b4b !important; border-color: #3730a3 !important; }
body.dark-theme .metric-card[style*="fdf4ff"] { background: #2e1065 !important; border-color: #6b21a8 !important; }
body.dark-theme .metric-card .text-green-800,
body.dark-theme .metric-card .text-blue-800,
body.dark-theme .metric-card .text-purple-800 { color: #e2e8f0 !important; }
body.dark-theme .metric-card .text-green-700,
body.dark-theme .metric-card .text-blue-700,
body.dark-theme .metric-card .text-purple-700 { color: #94a3b8 !important; }
body.dark-theme .score-badge.bg-green-100 { background: #052e16 !important; color: #86efac !important; }
body.dark-theme .score-badge.bg-blue-100 { background: #1e1b4b !important; color: #a5b4fc !important; }
body.dark-theme .score-badge.bg-purple-100 { background: #2e1065 !important; color: #d8b4fe !important; }

/* ===== DARK THEME - VALUE CARDS & ROADMAP ===== */
body.dark-theme .value-card { background: #1e293b !important; border-color: #334155 !important; }
body.dark-theme .value-card h3,
body.dark-theme .value-card .text-slate-800 { color: #e2e8f0 !important; }
body.dark-theme .value-card p,
body.dark-theme .value-card .text-slate-500 { color: #94a3b8 !important; }
body.dark-theme .roadmap-item { background: #1e293b !important; border-color: #334155 !important; }
body.dark-theme .roadmap-item .text-slate-800,
body.dark-theme .roadmap-item .font-bold { color: #e2e8f0 !important; }
body.dark-theme .roadmap-item .text-slate-500 { color: #94a3b8 !important; }

/* ===== DARK THEME - CODE BLOCKS ===== */
body.dark-theme .code-block { background: #0f172a !important; color: #7dd3fc !important; }

/* ===== DARK THEME - ARTICLE SUGGESTION CARDS ===== */
body.dark-theme a.bg-white.rounded-2xl h3 { color: #e2e8f0 !important; }
body.dark-theme a.bg-white.rounded-2xl span { color: #64748b !important; }
body.dark-theme a.bg-white.rounded-2xl:hover { border-color: #6366f1 !important; }

/* ===== DARK THEME - CATEGORY PILLS ===== */
body.dark-theme .bg-indigo-50 { background-color: #1e1b4b !important; }
body.dark-theme .bg-amber-50 { background-color: #1c1400 !important; }
body.dark-theme .bg-green-50 { background-color: #052e16 !important; }
body.dark-theme .bg-purple-50 { background-color: #2e1065 !important; }
body.dark-theme .bg-sky-50 { background-color: #0c2340 !important; }
body.dark-theme .text-indigo-700 { color: #818cf8 !important; }
body.dark-theme .text-amber-700 { color: #fbbf24 !important; }
body.dark-theme .text-green-700 { color: #4ade80 !important; }
body.dark-theme .text-purple-700 { color: #c084fc !important; }
body.dark-theme .text-sky-700 { color: #38bdf8 !important; }
body.dark-theme .text-indigo-600 { color: #818cf8 !important; }

/* ===== DARK THEME - BLOG CARDS ===== */
body.dark-theme .blog-card h3 { color: #e2e8f0 !important; }
body.dark-theme .blog-card p { color: #94a3b8 !important; }
body.dark-theme .blog-card .text-slate-900 { color: #e2e8f0 !important; }

/* ===== DARK THEME - SECTION TITLES ===== */
body.dark-theme section h2 { color: #f1f5f9 !important; }

/* ===== UTILITY CLASSES ===== */
.gradient-text { background: linear-gradient(135deg, #4f46e5, #9333ea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.delta-logo { width: 40px; height: 40px; flex-shrink: 0; }
.delta-logo svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 8px rgba(99,102,241,0.35)); }
.link-hover { position: relative; }
.link-hover::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #4f46e5; transition: width 0.3s; }
.link-hover:hover::after { width: 100%; }
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
#mobileMenu { transform: translateX(100%); transition: transform 0.3s ease; }
#mobileMenu.open { transform: translateX(0); }

/* ===== PROSE CONTENT ===== */
.prose-content h2 { font-size: 1.5rem; font-weight: 800; margin: 2rem 0 1rem; color: #0f172a; }
.prose-content h3 { font-size: 1.15rem; font-weight: 700; margin: 1.5rem 0 0.75rem; color: #1e293b; }
.prose-content p { margin-bottom: 1.25rem; line-height: 1.8; color: #475569; }
.prose-content ul { margin: 1rem 0 1.5rem 1.5rem; list-style: disc; }
.prose-content ul li { margin-bottom: 0.5rem; color: #475569; line-height: 1.7; }

/* ===== INFO BOX ===== */
.info-box { background: #f0f4ff; border: 1px solid #c7d2fe; border-radius: 1rem; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }