/* ==========================================================================
   Light-mode overrides for the "inner page" template (about, download, faq,
   features, patch-notes, premium, testimonials, legal pages, etc).
   Those pages hardcode dark colors in their own inline <style> blocks instead
   of referencing the shared tokens in theme.css, so they need an explicit
   light pass here. Loaded after each page's own <style>; the [data-theme]
   attribute selector already outranks the page's plain-element rules, so no
   !important is needed.
   ========================================================================== */

html[data-theme="light"] body {
  background: linear-gradient(135deg, #ffffff 0%, #f3effa 100%);
  color: #14101c;
}

/* Card-like surfaces */
html[data-theme="light"] .card,
html[data-theme="light"] .content-box,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .hero-section,
html[data-theme="light"] .info-section,
html[data-theme="light"] .plan,
html[data-theme="light"] .stat-box,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .team-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="light"] .timeline-content,
html[data-theme="light"] .value-card,
html[data-theme="light"] .version-entry,
html[data-theme="light"] .video-testimonial {
  background: rgba(20, 10, 30, 0.03);
}

html[data-theme="light"] .card:hover,
html[data-theme="light"] .feature-card:hover,
html[data-theme="light"] .value-card:hover,
html[data-theme="light"] .faq-item:hover {
  background: rgba(20, 10, 30, 0.05);
}

html[data-theme="light"] .success-section {
  background: rgba(6, 183, 28, 0.06);
}

html[data-theme="light"] .origin-section,
html[data-theme="light"] .contact-section,
html[data-theme="light"] .cta-section {
  background: linear-gradient(135deg, rgba(155, 50, 255, 0.06), rgba(188, 92, 255, 0.06));
}

/* Nested "black box" panels (checksums, requirement chips, comparison tables) */
html[data-theme="light"] .checksum-box,
html[data-theme="light"] .info-item,
html[data-theme="light"] .requirement,
html[data-theme="light"] .comparison-table,
html[data-theme="light"] .comparison-table th {
  background: rgba(20, 10, 30, 0.04);
}

/* Headings and primary text */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .card-title,
html[data-theme="light"] .value-title,
html[data-theme="light"] .team-name,
html[data-theme="light"] .faq-question-text,
html[data-theme="light"] .contact-title,
html[data-theme="light"] .cta-title,
html[data-theme="light"] .stat-value,
html[data-theme="light"] .timeline-title,
html[data-theme="light"] .version-number,
html[data-theme="light"] .info-item p,
html[data-theme="light"] .feature-title {
  color: #14101c;
}

/* Secondary / muted text used across every page */
html[data-theme="light"] .author-role,
html[data-theme="light"] .benefit,
html[data-theme="light"] .card-desc,
html[data-theme="light"] .changes-list li,
html[data-theme="light"] .comparison-table td,
html[data-theme="light"] .contact-text,
html[data-theme="light"] .faq-answer p,
html[data-theme="light"] .feature-desc,
html[data-theme="light"] .hero-text p,
html[data-theme="light"] .info-item p,
html[data-theme="light"] .integrity-desc,
html[data-theme="light"] .origin-section p,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .success-section p,
html[data-theme="light"] .team-bio,
html[data-theme="light"] .testimonial-text,
html[data-theme="light"] .timeline-desc,
html[data-theme="light"] .value-desc,
html[data-theme="light"] .version-platform,
html[data-theme="light"] .video-desc,
html[data-theme="light"] .card-specs,
html[data-theme="light"] .tagline {
  color: #5b5566;
}

html[data-theme="light"] p,
html[data-theme="light"] span,
html[data-theme="light"] li {
  color: inherit;
}

/* Common inline-styled greys used for placeholder/hash text */
html[data-theme="light"] [style*="color: #aaa"],
html[data-theme="light"] [style*="color:#aaa"] {
  color: #5b5566 !important;
}

html[data-theme="light"] .checksum-box {
  color: #6b21a8;
}

/* Purple accent used directly as TEXT color in each page's own inline
   <style> block (badges, table headers, links, small labels). #bc5cff
   reads fine on dark backgrounds but fails WCAG AA on white, so every
   page-specific class that colors text with it gets a darker, still
   clearly-purple swap here instead of editing every page's inline CSS. */
html[data-theme="light"] .info-item strong,
html[data-theme="light"] .button-secondary,
html[data-theme="light"] .download-title,
html[data-theme="light"] .footer-text a,
html[data-theme="light"] .user-info strong,
html[data-theme="light"] .faq-toggle,
html[data-theme="light"] .comparison-table th,
html[data-theme="light"] .version-date,
html[data-theme="light"] .back-link,
html[data-theme="light"] .updated-badge strong,
html[data-theme="light"] .zelvo-content h3,
html[data-theme="light"] .stat-value,
html[data-theme="light"] .section-title,
html[data-theme="light"] .integrity-title,
html[data-theme="light"] .plan-price {
  color: #7c1fd6;
}

/* Gradient-clipped headings (section titles, hero stat values) built with
   background:linear-gradient(...#9b32ff/#bc5cff...) + background-clip:text
   also need a darker gradient in light mode or the lightest stop washes
   out against the white page background. */
html[data-theme="light"] .section-title,
html[data-theme="light"] .stat-value,
html[data-theme="light"] h1 {
  background: linear-gradient(135deg, #9d2fe0, #6614bb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] [style*="color: #bc5cff"],
html[data-theme="light"] [style*="color:#bc5cff"] {
  color: #7c1fd6 !important;
}

html[data-theme="light"] [style*="color: #64c8ff"],
html[data-theme="light"] [style*="color:#64c8ff"] {
  color: #0b7bb3 !important;
}

/* about.html only: Zelvo and creator sections aren't shared with any other
   inner page, so their light-mode pass lives here instead of duplicated
   inline CSS in both language versions of the page. */
html[data-theme="light"] .zelvo-section {
  background: linear-gradient(135deg, rgba(20, 130, 200, 0.06), rgba(40, 150, 220, 0.03));
  border-color: rgba(20, 130, 200, 0.18);
}

html[data-theme="light"] .zelvo-feature {
  color: #5b5566;
}

html[data-theme="light"] .zelvo-feature::before {
  color: #0e6ba8;
}

html[data-theme="light"] .zelvo-icon {
  background: rgba(20, 130, 200, 0.08);
}

html[data-theme="light"] .creator-section {
  background: #ffffff;
  border-color: rgba(124, 31, 214, 0.15);
  box-shadow: 0 2px 12px rgba(45, 30, 70, 0.06);
}

html[data-theme="light"] .creator-name {
  color: #14101c;
}

html[data-theme="light"] .creator-bio {
  color: #5b5566;
}

html[data-theme="light"] .creator-link {
  color: #14101c;
  background: rgba(124, 31, 214, 0.05);
}

html[data-theme="light"] .creator-link:hover {
  background: rgba(124, 31, 214, 0.12);
  border-color: rgba(124, 31, 214, 0.4);
}