/*
 * Independent 88API landing page: light theme only.
 * Keep every selector scoped, including those inside media queries.
 * The legacy SEO prepaint background is !important: override it only in light.
 * Do not change the original bundle or any dark-theme rule.
 */
html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] #root {
  background: #f8fafc !important;
}

html[data-theme="light"] {
  --muted: #526176;
  --line: #dce4ef;
  --surface: #ffffff;
}

/* Put the light backdrop underneath the existing canvas, not over it. */
html[data-theme="light"] .app {
  background: linear-gradient(135deg, #ffffff 15%, #f5f8ff 65%, #f5f3ff 100%);
}

html[data-theme="light"] .page-particles {
  opacity: 0.65;
}

html[data-theme="light"] .hero {
  background: transparent;
}

html[data-theme="light"] .below-fold {
  background: rgba(248, 250, 252, 0.18);
  border-color: #e2e8f0;
}

html[data-theme="light"] .hero-copy > p {
  color: #475569;
  line-height: 1.65;
}

html[data-theme="light"] .accent-violet {
  color: #7041df;
}

html[data-theme="light"] .feature-list small,
html[data-theme="light"] .step small,
html[data-theme="light"] .resource-links small,
html[data-theme="light"] .quality-metrics small,
html[data-theme="light"] .coverage-stats span,
html[data-theme="light"] .timeline-copy-line time {
  color: #526176;
}

html[data-theme="light"] .eyebrow {
  color: #1d5fcb;
  border-color: #c7dcfb;
  background: #eff6ff;
}

html[data-theme="light"] .button-outline {
  background: #ffffff;
  border-color: #cbd5e1;
}

html[data-theme="light"] .api-console {
  background: #ffffff;
  border-color: #dce4ef;
  box-shadow: 0 20px 60px rgba(51, 65, 85, 0.09), 0 2px 8px rgba(51, 65, 85, 0.03);
}

html[data-theme="light"] .protocol-tabs,
html[data-theme="light"] .endpoint-row {
  border-color: #e2e8f0;
}

html[data-theme="light"] .protocol-tabs button.active {
  color: #5140a0;
}

html[data-theme="light"] .endpoint-row > span {
  color: #1d5fcb;
  background: #eff6ff;
}

html[data-theme="light"] .code-area {
  height: 220px;
  background: #ffffff;
}

html[data-theme="light"] .code-area pre,
html[data-theme="light"] .response-code {
  color: #334155;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  scrollbar-width: thin;
}

html[data-theme="light"] .response-code {
  height: 112px;
  background: #f8fafc;
}

html[data-theme="light"] .request-label,
html[data-theme="light"] .response-label,
html[data-theme="light"] .console-footer,
html[data-theme="light"] .api-health {
  color: #526176;
}

html[data-theme="light"] .token-command { color: #047857; }
html[data-theme="light"] .token-option { color: #1d4ed8; }
html[data-theme="light"] .token-key { color: #036987; }
html[data-theme="light"] .token-string { color: #925009; }
html[data-theme="light"] .token-number { color: #7041ad; }
html[data-theme="light"] .token-punctuation { color: #526176; }
html[data-theme="light"] .token-result { color: #5140a0; }

html[data-theme="light"] .announcement-strip,
html[data-theme="light"] .resource-panel {
  background: #ffffff;
  border-color: #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(51, 65, 85, 0.045);
}

html[data-theme="light"] .quick-steps {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

html[data-theme="light"] .coverage-stats span,
html[data-theme="light"] .quality-metrics span,
html[data-theme="light"] .faq-item > button {
  background: #f8fafc;
  border-color: #e2e8f0;
}

html[data-theme="light"] footer {
  color: #526176;
  background: #ffffff;
  border-color: #e2e8f0;
}

@media (max-width: 520px) {
  html[data-theme="light"] .page-particles {
    opacity: 0.6;
  }

  html[data-theme="light"] .code-area {
    height: 210px;
  }

  html[data-theme="light"] .code-area pre,
  html[data-theme="light"] .response-code {
    font-size: 11px;
  }

  html[data-theme="light"] .response-code {
    height: 108px;
  }

  html[data-theme="light"] .quick-steps {
    padding: 16px 12px;
  }

  html[data-theme="light"] .step {
    background: #f8fafc;
    border-color: #e2e8f0;
  }

  html[data-theme="light"] .step small {
    font-size: 11px;
  }
}