/* ── Light Mode — Static Pages ──────────────────────── */

html[data-theme="light"] {
  --bg: #f8f9fc;
  --bg-raised: #f0f2f7;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f6fa;
  --border: #dde0ea;
  --border-hover: #c5c9d8;
  --white: #0f1629;
  --gray-50: #1c2540;
  --gray-100: #3a4260;
  --gray-200: #5a6280;
  --gray-300: #7a82a0;
  --gray-400: #a0a6b8;
  --gray-500: #7a82a0;
  --gray-600: #a0a6b8;
  --accent: #e84400;
  --accent-dim: rgba(232, 68, 0, 0.7);
  --accent-glow: rgba(232, 68, 0, 0.2);
  --accent-subtle: rgba(232, 68, 0, 0.06);
  --blue: rgba(70, 100, 240, 0.08);
  --green: #16a34a;
  --green-dim: rgba(22, 163, 74, 0.6);
  --green-subtle: rgba(22, 163, 74, 0.08);
  --green-glow: rgba(22, 163, 74, 0.12);
  --red: #dc2626;
  --red-subtle: rgba(220, 38, 38, 0.08);
}

/* ── Nav backgrounds ───────────────────────────────── */
html[data-theme="light"] nav {
  background: rgba(248, 249, 252, 0.92);
}
@media (max-width: 768px) {
  html[data-theme="light"] .nav-links {
    background: rgba(248, 249, 252, 0.97);
  }
}

/* ── Grain overlay — reduce on light bg ────────────── */
html[data-theme="light"] .grain {
  opacity: 0.015;
}

/* ── Hero grid lines ───────────────────────────────── */
html[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px) !important;
}

/* ── White tint → dark tint overrides ──────────────── */
html[data-theme="light"] .btn-ghost:hover {
  background: rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .hero-trust-badge--openclaw {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: #3a4260;
}
html[data-theme="light"] .p-card::before,
html[data-theme="light"] .step-card::before,
html[data-theme="light"] .feature-card::before,
html[data-theme="light"] .help-cta::before {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}
html[data-theme="light"] .term-head {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .f-socials a:hover {
  background: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .toc {
  background: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .custom-select-dropdown {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ── Pricing cards — soft orange shadows ───────────── */
html[data-theme="light"] .p-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .p-card:hover {
  box-shadow: 0 12px 40px rgba(232, 68, 0, 0.12), 0 0 20px rgba(232, 68, 0, 0.06);
}
html[data-theme="light"] .p-card.featured {
  box-shadow: 0 4px 24px rgba(232, 68, 0, 0.15), 0 0 40px rgba(232, 68, 0, 0.08);
}
html[data-theme="light"] .p-card.featured:hover {
  box-shadow: 0 12px 48px rgba(232, 68, 0, 0.2), 0 0 40px rgba(232, 68, 0, 0.1);
}

/* Step cards — softer shadows */
html[data-theme="light"] .step-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 0 20px rgba(232, 68, 0, 0.04);
}

/* ── Security page — card hovers ───────────────────── */
html[data-theme="light"] .measure:hover {
  background: rgba(232, 68, 0, 0.06);
  box-shadow: -2px 0 0 var(--green), 0 4px 24px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .summary-item:hover {
  background: rgba(232, 68, 0, 0.06);
}

/* ── Testimonial cards ────────────────────────────── */
html[data-theme="light"] .testimonial-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .testimonial-card:hover {
  box-shadow: 0 8px 32px rgba(232, 68, 0, 0.1);
}
html[data-theme="light"] .testimonial-avatar {
  color: #fff;
}

/* ── Selection ─────────────────────────────────────── */
html[data-theme="light"] ::selection {
  background: var(--accent);
  color: #fff;
}

/* ── Code / terminal blocks ────────────────────────── */
html[data-theme="light"] .term {
  background: #f0f2f7;
  color: #1c2540;
  border-color: #dde0ea;
}
html[data-theme="light"] .term.bad {
  border-color: rgba(220, 38, 38, 0.25);
}
html[data-theme="light"] .term.good {
  border-color: rgba(22, 163, 74, 0.25);
}
html[data-theme="light"] .term-head {
  background: #e4e7f0;
  border-bottom-color: #dde0ea;
}
html[data-theme="light"] .term-body {
  background: #f5f6fa;
}
html[data-theme="light"] .term.bad .term-body {
  background: rgba(220, 38, 38, 0.04);
}
html[data-theme="light"] .term.good .term-body {
  background: rgba(22, 163, 74, 0.04);
}

/* ── Deploy demo — config adapts, terminal stays dark ── */
html[data-theme="light"] .demo-config {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .demo-terminal {
  background: #0c1020; border-color: #151d38;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .demo-term-head { background: rgba(0,0,0,0.3); }
html[data-theme="light"] .demo-term-body { background: rgba(0,0,0,0.15); }
html[data-theme="light"] .demo-term-title { color: #6b7590; }
html[data-theme="light"] .demo-line .ts { color: #3d4560; }
html[data-theme="light"] .demo-line .msg { color: #22c55e; }
html[data-theme="light"] .demo-line .done { color: #22c55e; }
html[data-theme="light"] .demo-term-blink { background: #22c55e; }
html[data-theme="light"] .demo-success {
  background: #0c1020;
}
html[data-theme="light"] .demo-success-title { color: #eef0f6; }
html[data-theme="light"] .demo-success-icon {
  background: #16a34a; box-shadow: 0 0 60px rgba(22,163,74,0.3);
}
html[data-theme="light"] .demo-success-url {
  color: #ff4d00; background: rgba(255,77,0,0.07); border-color: rgba(255,77,0,0.2);
}
html[data-theme="light"] .demo-deploy-btn.active {
  box-shadow: 0 0 20px rgba(232,68,0,0.25), 0 4px 16px rgba(232,68,0,0.15);
}

/* ── Ticker ────────────────────────────────────────── */
html[data-theme="light"] .ticker {
  background: linear-gradient(90deg, rgba(220,38,38,0.06) 0%, rgba(232,68,0,0.08) 50%, rgba(220,38,38,0.06) 100%);
  border-bottom-color: rgba(220,38,38,0.12);
}

/* ── Footer ────────────────────────────────────────── */
html[data-theme="light"] footer {
  background: #eef0f6;
  border-top-color: var(--border);
}