html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-left: 1.25rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 242, 245, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #d2ccc1;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
}

.theme-toggle-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #0047ab, #b44fff);
  box-shadow: 0 0 0 4px rgba(180, 79, 255, 0.12);
  flex-shrink: 0;
}

.theme-toggle-label {
  line-height: 1;
}

html[data-theme="light"] body {
  background: #f4f7fb !important;
  color: #0047ab !important;
}

html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] label,
html[data-theme="light"] small,
html[data-theme="light"] td,
html[data-theme="light"] th,
html[data-theme="light"] blockquote {
  color: #0047ab !important;
  opacity: 1 !important;
}

html[data-theme="light"] nav {
  background: rgba(244, 247, 251, 0.92) !important;
  border-bottom-color: rgba(0, 71, 171, 0.12) !important;
}

html[data-theme="light"] .theme-toggle {
  background: rgba(0, 71, 171, 0.06);
  border-color: rgba(0, 71, 171, 0.14);
  color: #0047ab;
}

html[data-theme="light"] .nav-links a {
  color: #0047ab !important;
}

html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active {
  color: #b44fff !important;
}

html[data-theme="light"] .section-label,
html[data-theme="light"] .service-tag,
html[data-theme="light"] .service-block-tag,
html[data-theme="light"] .pillar-tag,
html[data-theme="light"] .pricing-tier,
html[data-theme="light"] .role-tag,
html[data-theme="light"] .role-badge.violet,
html[data-theme="light"] .outcomes-title,
html[data-theme="light"] .theme-toggle-dot,
html[data-theme="light"] a:not(.btn-primary):not(.nav-cta) {
  color: #b44fff !important;
}

html[data-theme="light"] .nav-links a.nav-cta,
html[data-theme="light"] .nav-links a.nav-cta:visited,
html[data-theme="light"] .nav-links a.nav-cta:hover,
html[data-theme="light"] .nav-links a.nav-cta:active {
  color: #ffffff !important;
  opacity: 1 !important;
}

html[data-theme="light"] .hero-bg,
html[data-theme="light"] .page-hero-bg {
  background:
    radial-gradient(ellipse 55% 65% at 85% 45%, rgba(0, 71, 171, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 15% 70%, rgba(180, 79, 255, 0.1) 0%, transparent 60%),
    #f4f7fb !important;
}

html[data-theme="light"] .hero-grid {
  opacity: 0.55;
}

html[data-theme="light"] #home,
html[data-theme="light"] #services,
html[data-theme="light"] #services-detail,
html[data-theme="light"] #roles,
html[data-theme="light"] #founder,
html[data-theme="light"] #personas,
html[data-theme="light"] #contact,
html[data-theme="light"] .join-section {
  background: #f4f7fb !important;
}

html[data-theme="light"] #about,
html[data-theme="light"] #how,
html[data-theme="light"] #why,
html[data-theme="light"] #team,
html[data-theme="light"] #mission,
html[data-theme="light"] #pillars,
html[data-theme="light"] #pricing,
html[data-theme="light"] #faq,
html[data-theme="light"] .team-section {
  background: rgba(0, 71, 171, 0.05) !important;
  border-color: rgba(0, 71, 171, 0.12) !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .bio-name,
html[data-theme="light"] .role-title,
html[data-theme="light"] .founder-name,
html[data-theme="light"] .team-name,
html[data-theme="light"] .value-title,
html[data-theme="light"] .hero-tagline,
html[data-theme="light"] .hero-intro {
  color: #0047ab !important;
}

html[data-theme="light"] h1 em,
html[data-theme="light"] h1 span,
html[data-theme="light"] h2 span {
  color: #b44fff !important;
}

html[data-theme="light"] .divider,
html[data-theme="light"] .role-card::before {
  background: linear-gradient(90deg, #0047ab, #b44fff) !important;
}

html[data-theme="light"] .hero-sub,
html[data-theme="light"] .section-intro,
html[data-theme="light"] .body-text,
html[data-theme="light"] .step p,
html[data-theme="light"] .service-card p,
html[data-theme="light"] .service-features li,
html[data-theme="light"] .deliverables-list li,
html[data-theme="light"] .pricing-from,
html[data-theme="light"] .pricing-unit,
html[data-theme="light"] .pricing-includes,
html[data-theme="light"] .pricing-features li,
html[data-theme="light"] .pricing-note,
html[data-theme="light"] .outcome-text,
html[data-theme="light"] .why-card p,
html[data-theme="light"] .bio-text,
html[data-theme="light"] .join-copy,
html[data-theme="light"] .hero-intro,
html[data-theme="light"] .hero-tagline,
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .role-card p,
html[data-theme="light"] .role-desc,
html[data-theme="light"] .role-list li,
html[data-theme="light"] .role-section-title,
html[data-theme="light"] .value-desc,
html[data-theme="light"] .value-card p,
html[data-theme="light"] .cred-text,
html[data-theme="light"] .team-desc,
html[data-theme="light"] .faq-a,
html[data-theme="light"] .contact-detail,
html[data-theme="light"] .contact-email,
html[data-theme="light"] .form-group label,
html[data-theme="light"] .label-hint,
html[data-theme="light"] .form-error,
html[data-theme="light"] .form-success,
html[data-theme="light"] .footer-copy,
html[data-theme="light"] .footer-tagline {
  color: #0047ab !important;
  opacity: 1 !important;
}

html[data-theme="light"] .about-stat-label {
  color: #0047ab !important;
  opacity: 1 !important;
}

html[data-theme="light"] .service-features li::before,
html[data-theme="light"] .deliverables-list li::before,
html[data-theme="light"] .pricing-features li::before,
html[data-theme="light"] .role-list li::before,
html[data-theme="light"] .outcome-check,
html[data-theme="light"] .contact-detail a,
html[data-theme="light"] .contact-email a {
  color: #b44fff !important;
}

html[data-theme="light"] .role-badge,
html[data-theme="light"] .checkbox-custom,
html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group textarea:focus {
  border-color: rgba(180, 79, 255, 0.45) !important;
}

html[data-theme="light"] .role-toggle,
html[data-theme="light"] .checkbox-label input:checked + .checkbox-custom,
html[data-theme="light"] .checkbox-custom::after {
  color: #b44fff !important;
}

html[data-theme="light"] .service-card,
html[data-theme="light"] .pillar,
html[data-theme="light"] .service-outcomes,
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .why-card,
html[data-theme="light"] .role-card,
html[data-theme="light"] .bio-card,
html[data-theme="light"] .contact-form-card,
html[data-theme="light"] .resource-access-card,
html[data-theme="light"] .team-card,
html[data-theme="light"] .founder-card,
html[data-theme="light"] .persona-card {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .pillars-grid {
  background: rgba(15, 23, 42, 0.08) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .service-block {
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .pricing-card.featured {
  background: rgba(0, 71, 171, 0.12) !important;
  border-color: rgba(0, 71, 171, 0.18) !important;
}

html[data-theme="light"] .pricing-divider {
  background: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .cta-strip {
  background: linear-gradient(135deg, rgba(0, 71, 171, 0.1), rgba(180, 79, 255, 0.08)) !important;
  border-top-color: rgba(0, 71, 171, 0.12) !important;
  border-bottom-color: rgba(0, 71, 171, 0.12) !important;
}

html[data-theme="light"] .signature-badge {
  color: #ffffff !important;
}

html[data-theme="light"] .bio-photo {
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(0, 71, 171, 0.08) 0%, transparent 68%),
    linear-gradient(135deg, rgba(0, 71, 171, 0.08), rgba(180, 79, 255, 0.06)) !important;
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .bio-photo-label {
  color: #0047ab !important;
  opacity: 1 !important;
}

html[data-theme="light"] .btn-ghost {
  border-color: rgba(0, 71, 171, 0.2) !important;
  color: #0047ab !important;
  background: rgba(0, 71, 171, 0.03);
}

html[data-theme="light"] .btn-ghost:hover {
  background: rgba(0, 71, 171, 0.08) !important;
}

html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #0047ab !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .form-group input::placeholder,
html[data-theme="light"] .form-group textarea::placeholder {
  color: #0047ab !important;
  opacity: 0.75 !important;
}

html[data-theme="light"] .checkbox-label {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #0047ab !important;
}

html[data-theme="light"] footer {
  border-top-color: rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 900px) {
  .theme-toggle {
    margin-left: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
}