/* Helixify – Dark theme system
   Strategy: existing pages use Tailwind utilities (bg-white, bg-surfaceLight,
   text-textDark, text-black/70, border-black/5, etc.). Tailwind config remaps
   the *named* colors to dark values; this stylesheet overrides the
   black/white literal utilities so the whole site flips to dark without
   touching individual pages. */

:root {
  color-scheme: dark;
  --bg: #0A0E27;
  --bg-2: #11162B;
  --card: #161B36;
  --card-2: #1B2244;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text: #E8EAF6;
  --text-muted: rgba(232,234,246,0.68);
  --text-soft: rgba(232,234,246,0.50);
  --cyan: #22D3EE;
  --cyan-soft: rgba(34,211,238,0.16);
  --purple: #A855F7;
  --purple-soft: rgba(168,85,247,0.18);
  --magenta: #D946EF;
  --gradient-brand: linear-gradient(135deg, #22D3EE 0%, #6366F1 50%, #A855F7 100%);
  --ring: #22D3EE;
}

html, body { background: var(--bg); color: var(--text); }
body { padding-bottom: env(safe-area-inset-bottom); }
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: .5rem; }

/* ─── Override Tailwind literal utilities to dark equivalents ─── */

.bg-white { background-color: var(--card) !important; }
.bg-white\/90 { background-color: rgba(15,18,42,0.85) !important; backdrop-filter: blur(14px); }
.bg-white\/95 { background-color: rgba(15,18,42,0.95) !important; }
.bg-white\/10 { background-color: rgba(255,255,255,0.06) !important; }
.bg-white\/5 { background-color: rgba(255,255,255,0.04) !important; }

.text-textDark { color: var(--text) !important; }
.text-black\/70, .text-black\/60 { color: var(--text-muted) !important; }
.text-black\/50 { color: var(--text-soft) !important; }

.border-black\/5 { border-color: var(--border) !important; }
.border-black\/10 { border-color: var(--border) !important; }
.border-black\/20 { border-color: var(--border-strong) !important; }
.hover\:border-black\/20:hover { border-color: var(--border-strong) !important; }
.hover\:bg-black\/5:hover { background-color: rgba(255,255,255,0.04) !important; }

/* Surface remaps */
.bg-surfaceLight { background-color: var(--bg-2) !important; }

/* Brand color (was petrol/teal, now cyan) */
.text-petrol { color: var(--cyan) !important; }
.bg-petrol { background-color: var(--cyan) !important; color: #06121A !important; }
.bg-petrol\/10 { background-color: var(--cyan-soft) !important; }
.bg-petrol\/20 { background-color: rgba(34,211,238,0.25) !important; }
.hover\:bg-petrol:hover { background-color: var(--cyan) !important; color: #06121A !important; }
.bg-lilac { background-color: var(--purple) !important; color: #fff !important; }
.bg-lilac\/10 { background-color: var(--purple-soft) !important; }
.text-lilac { color: var(--purple) !important; }
.hover\:bg-lilac:hover { background-color: var(--purple) !important; color: #fff !important; }
.hover\:text-lilac:hover { color: var(--purple) !important; }
.hover\:text-petrol:hover { color: var(--cyan) !important; }

.bg-petrolDark { background-color: #060920 !important; }
.text-petrolDark { color: var(--cyan) !important; }
.from-petrolDark { --tw-gradient-from: #0E1330 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(14,19,48,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-petrol { --tw-gradient-to: #1E2A6B var(--tw-gradient-to-position) !important; }
.from-white, .from-petrolDark.to-petrol { background-image: var(--gradient-brand) !important; }

/* Hero background remap */
.bg-gradient-to-b.from-white.to-surfaceLight {
  background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34,211,238,0.12), transparent 70%),
                    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(168,85,247,0.12), transparent 60%),
                    linear-gradient(to bottom, #0A0E27, #11162B) !important;
}

/* Cards get subtle border + glow on hover */
.shadow-soft {
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px rgba(0,0,0,0.45) !important;
  border: 1px solid var(--border);
}
.lift { transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease, border-color 220ms ease; }
.lift:hover { transform: translateY(-4px); border-color: rgba(34,211,238,0.35); box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(34,211,238,0.18); }

/* Inputs */
input, textarea, select {
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text-soft); }
input.bg-white, textarea.bg-white, select.bg-white,
.bg-surfaceLight input, .bg-surfaceLight textarea, .bg-surfaceLight select {
  background-color: rgba(255,255,255,0.04) !important;
  border-color: var(--border) !important;
}

/* ─── Header / nav ─── */
.nav-link { position: relative; color: var(--text); }
.nav-link.active { color: var(--cyan); }
.nav-link.active::after {
  content: ''; position: absolute; bottom: -6px; left: 0; right: 0;
  height: 2px; background: var(--gradient-brand); border-radius: 2px;
}

/* Brand wordmark in header */
.brand-mark {
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 800; letter-spacing: -0.01em;
}

/* Dropdown menu */
.has-submenu { position: relative; }
.submenu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 280px;
  background: #11162B;
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(34,211,238,0.06);
  padding: .5rem;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  z-index: 60;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu,
.has-submenu.open .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem .9rem; border-radius: .75rem; text-decoration: none; color: var(--text);
}
.submenu a:hover { background: rgba(34,211,238,0.08); }
.submenu .sm-title { font-weight: 600; font-size: 0.92rem; }
.submenu .sm-desc { font-size: 0.78rem; color: var(--text-soft); margin-top: 2px; white-space: pre-line; }
.submenu .sm-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  background: var(--cyan-soft); color: var(--cyan);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Code block */
.codeblock {
  background: #060920; color: var(--text); border-radius: 1rem;
  padding: 1.25rem; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem; line-height: 1.6; overflow-x: auto;
  border: 1px solid var(--border);
}
.codeblock .k { color: var(--purple); }
.codeblock .s { color: var(--cyan); }
.codeblock .c { color: var(--text-soft); font-style: italic; }
.codeblock .n { color: #FBBF24; }

/* Mobile menu */
@media (max-width: 768px) {
  .submenu { position: static; box-shadow: none; border: none; opacity: 1; visibility: visible; transform: none; padding: 0 0 0 1rem; background: transparent; }
}

/* Helper utilities */
.glow-cyan { box-shadow: 0 0 60px rgba(34,211,238,0.35); }
.text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.divider-glow { height: 1px; background: linear-gradient(90deg, transparent, rgba(34,211,238,0.35), transparent); }

/* Marquee */
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }