body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #0a0f1e;
}

.glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
}

.glass-strong {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
}

.glow-line {
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  height: 1px;
}

.hero-gradient {
  background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(59,130,246,0.15) 0%, transparent 70%);
}

.card-glow:hover {
  box-shadow: 0 0 40px rgba(59,130,246,0.1);
  border-color: rgba(59,130,246,0.3);
}

.float-card {
  animation: floatCard 6s ease-in-out infinite;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0px) rotateX(2deg) rotateY(-2deg); }
  50% { transform: translateY(-14px) rotateX(-1deg) rotateY(2deg); }
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.code-block {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
}

.pulse-dot {
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

pre code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

.doc-sidebar a {
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.doc-sidebar a:hover,
.doc-sidebar a.active {
  color: #fff;
  border-left-color: #3b82f6;
}

.doc-section {
  scroll-margin-top: 100px;
}

.doc-endpoint {
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.15);
}

.doc-table th {
  background: rgba(255,255,255,0.03);
  font-weight: 600;
  color: #d1d5db;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.doc-table td, .doc-table th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.doc-table tr:last-child td {
  border-bottom: none;
}

/* ===== THEME TOGGLE ICONS ===== */
.theme-icon-light { display: none; }
.theme-icon-dark { display: block; }
html[data-theme="light"] .theme-icon-light { display: block; }
html[data-theme="light"] .theme-icon-dark { display: none; }

/* ===== LIGHT THEME ===== */
html[data-theme="light"] body {
  background: #ffffff;
}

html[data-theme="light"] .text-white { color: #0f172a; }
html[data-theme="light"] .text-gray-300 { color: #334155; }
html[data-theme="light"] .text-gray-400 { color: #475569; }
html[data-theme="light"] .text-gray-500 { color: #64748b; }
html[data-theme="light"] .text-blue-400 { color: #2563eb; }
html[data-theme="light"] .text-blue-300 { color: #3b82f6; }
html[data-theme="light"] .text-green-400 { color: #16a34a; }
html[data-theme="light"] .text-red-400 { color: #dc2626; }
html[data-theme="light"] .text-yellow-400 { color: #ca8a04; }

html[data-theme="light"] .hover\:text-white:hover { color: #0f172a; }
html[data-theme="light"] .hover\:text-blue-400:hover { color: #2563eb; }
html[data-theme="light"] .hover\:text-blue-300:hover { color: #3b82f6; }
html[data-theme="light"] .group:hover .group-hover\:text-blue-400 { color: #2563eb; }
html[data-theme="light"] .group:hover .group-hover\:text-blue-300 { color: #3b82f6; }

html[data-theme="light"] .bg-white\/5 { background-color: #f1f5f9; }
html[data-theme="light"] .border-white\/5 { border-color: #e2e8f0; }
html[data-theme="light"] .border-white\/10 { border-color: #e2e8f0; }
html[data-theme="light"] .bg-navy-950\/50 { background-color: #ffffff; }
html[data-theme="light"] .placeholder-gray-500::placeholder { color: #94a3b8; }

/* keep white text on blue fills (same element and descendants) */
html[data-theme="light"] .bg-blue-400.text-white,
html[data-theme="light"] .bg-blue-500.text-white,
html[data-theme="light"] .bg-blue-600.text-white,
html[data-theme="light"] .bg-blue-400 .text-white,
html[data-theme="light"] .bg-blue-500 .text-white,
html[data-theme="light"] .bg-blue-600 .text-white { color: #ffffff; }

/* keep code/terminal surfaces dark */
html[data-theme="light"] .glass-strong {
  background: rgba(10, 15, 30, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme="light"] .code-block {
  background: rgba(10, 15, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] .code-block .text-white { color: #ffffff; }
html[data-theme="light"] .code-block .text-gray-300 { color: #d1d5db; }
html[data-theme="light"] .code-block .text-gray-400 { color: #94a3b8; }
html[data-theme="light"] .code-block .text-gray-500 { color: #64748b; }
html[data-theme="light"] .code-block .text-blue-400 { color: #60a5fa; }
html[data-theme="light"] .code-block .text-blue-300 { color: #93c5fd; }
html[data-theme="light"] .code-block .text-green-400 { color: #4ade80; }
html[data-theme="light"] .code-block .text-yellow-400 { color: #facc15; }
html[data-theme="light"] .code-block .text-red-400 { color: #f87171; }

/* component overrides */
html[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .hero-gradient {
  background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(59, 130, 246, 0.10) 0%, transparent 70%);
}
html[data-theme="light"] .doc-endpoint {
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.2);
}
html[data-theme="light"] .doc-table th {
  background: rgba(15, 23, 42, 0.04);
  color: #334155;
}
html[data-theme="light"] .doc-table td,
html[data-theme="light"] .doc-table th {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .doc-sidebar a:hover,
html[data-theme="light"] .doc-sidebar a.active {
  color: #0f172a;
}