/* =====================================================
   LIGHT THEME — sitewide overrides
   Hardcoded dark heroes / overlays ignored CSS variables.
===================================================== */

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

/* Global page wash (components.css body::before is dark #09090b) */
[data-theme="light"] body::before {
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.08), transparent 42%),
    radial-gradient(circle at bottom left, rgba(225, 29, 72, 0.07), transparent 38%),
    linear-gradient(180deg, var(--bg-base), var(--bg-base)) !important;
}

[data-theme="light"] body::after {
  background-image:
    linear-gradient(rgba(9, 9, 11, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 9, 11, 0.045) 1px, transparent 1px) !important;
  opacity: 0.55 !important;
}

/* Page heroes that bake in dark gradients */
[data-theme="light"] .hero,
[data-theme="light"] .hero-section,
[data-theme="light"] .about-hero,
[data-theme="light"] .services-hero,
[data-theme="light"] .portfolio-hero,
[data-theme="light"] .products-hero,
[data-theme="light"] .automation-hero,
[data-theme="light"] .contact-hero,
[data-theme="light"] .careers-hero,
[data-theme="light"] .blog-hero,
[data-theme="light"] .case-study-hero,
[data-theme="light"] .pay-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(225, 29, 72, 0.08), transparent 38%),
    radial-gradient(circle at 85% 10%, rgba(124, 58, 237, 0.09), transparent 40%),
    linear-gradient(180deg, var(--bg-base), var(--bg-surface)) !important;
  color: var(--text-main) !important;
}

[data-theme="light"] .portfolio-hero::before,
[data-theme="light"] .products-hero::before,
[data-theme="light"] .hero::before,
[data-theme="light"] .hero::after {
  background-image:
    linear-gradient(rgba(9, 9, 11, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 9, 11, 0.04) 1px, transparent 1px) !important;
  opacity: 0.5 !important;
}

[data-theme="light"] .automation-hero::before {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 45%),
    radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.08), transparent 40%) !important;
}

[data-theme="light"] .automation-hero p,
[data-theme="light"] .about-hero p,
[data-theme="light"] .services-hero p,
[data-theme="light"] .portfolio-hero p,
[data-theme="light"] .products-hero p,
[data-theme="light"] .hero p,
[data-theme="light"] .hero-description {
  color: var(--text-muted) !important;
}

[data-theme="light"] .hero h1,
[data-theme="light"] .about-hero h1,
[data-theme="light"] .services-hero h1,
[data-theme="light"] .portfolio-hero h1,
[data-theme="light"] .products-hero h1,
[data-theme="light"] .automation-hero h1,
[data-theme="light"] .section-title,
[data-theme="light"] .section-heading h2,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: var(--text-main);
}

/* Contact page cards are light surfaces in light mode */
[data-theme="light"] .hero-contact-card,
[data-theme="light"] .contact-card,
[data-theme="light"] .project-help-card {
  background: #ffffff !important;
  border-color: rgba(9, 9, 11, 0.1) !important;
}

[data-theme="light"] .contact-card h1,
[data-theme="light"] .contact-card h2,
[data-theme="light"] .contact-card h3,
[data-theme="light"] .contact-card h4,
[data-theme="light"] .contact-card h5,
[data-theme="light"] .contact-card .text-white,
[data-theme="light"] .contact-card .form-label,
[data-theme="light"] .hero-contact-card h5,
[data-theme="light"] .hero-contact-card .text-white,
[data-theme="light"] .project-help-card h3,
[data-theme="light"] .project-help-card .text-white,
[data-theme="light"] .project-help-card li {
  color: #09090b !important;
  -webkit-text-fill-color: #09090b !important;
}

[data-theme="light"] .hero-contact-card .text-secondary,
[data-theme="light"] .contact-card .text-secondary,
[data-theme="light"] .project-help-card .text-secondary {
  color: #52525b !important;
  -webkit-text-fill-color: #52525b !important;
}

/* Keep gradient text working on light bg */
[data-theme="light"] .text-gradient {
  background: linear-gradient(135deg, #e11d48, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Navbar */
[data-theme="light"] .glass-navbar {
  background: rgba(252, 252, 252, 0.85) !important;
  border-bottom: 1px solid var(--border-color) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-theme="light"] .nav-links a {
  color: var(--text-main) !important;
  -webkit-text-fill-color: var(--text-main) !important;
  background-color: transparent !important;
}

[data-theme="light"] .nav-toggle-label span {
  background: var(--text-main) !important;
}

[data-theme="light"] .nav-start-project {
  color: #18181b !important;
  -webkit-text-fill-color: #18181b !important;
  border-color: rgba(9, 9, 11, 0.16) !important;
  background: #ffffff !important;
}

[data-theme="light"] .nav-start-project:hover {
  border-color: rgba(225, 29, 72, 0.4) !important;
  background: #fff1f2 !important;
}

@media (max-width: 1280px) {
  [data-theme="light"] .nav-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
  }
}

[data-theme="light"] .theme-toggle-btn {
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Cards / glass panels that assume dark fill */
[data-theme="light"] .glass-card,
[data-theme="light"] .service-card,
[data-theme="light"] .project-card,
[data-theme="light"] .tech-card,
[data-theme="light"] .bento-card,
[data-theme="light"] .timeline-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .overview-card,
[data-theme="light"] .domain-card,
[data-theme="light"] .product-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .process-card,
[data-theme="light"] .compare-column,
[data-theme="light"] .pay-card,
[data-theme="light"] .pay-aside-card,
[data-theme="light"] .legal-card,
[data-theme="light"] .legal-office-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-subtle);
}

[data-theme="light"] .pay-input,
[data-theme="light"] select.pay-input {
  background: #fff !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .pay-mode {
  background: var(--bg-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Footer — readable on light pages */
[data-theme="light"] .footer {
  background: #0f1117 !important;
  color: #cbd5e1 !important;
}

/* Secondary / outline buttons readable in light */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-outline-light,
[data-theme="light"] .btn-outline-primary {
  background: rgba(9, 9, 11, 0.04) !important;
  border-color: var(--border-color) !important;
}

/* Sections that force slate fills */
[data-theme="light"] .services-home,
[data-theme="light"] .projects-section,
[data-theme="light"] .process-section,
[data-theme="light"] .why-section,
[data-theme="light"] .premium-stats {
  background-color: transparent !important;
}

[data-theme="light"] .company-strengths,
[data-theme="light"] .domain-section,
[data-theme="light"] .alt-section,
[data-theme="light"] .surface-section {
  background-color: var(--bg-surface) !important;
}

/* Hero code window — keep dark IDE chrome so cyan code stays readable */
html[data-theme="light"] .glass-panel,
html[data-theme="light"] .code-window.glass-panel,
[data-theme="light"] .glass-panel,
[data-theme="light"] .code-window {
  background: #0f1423 !important;
  background-color: #0f1423 !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="light"],
[data-theme="light"] {
  --code-text: #7dd3fc;
  --glass-border: rgba(148, 163, 184, 0.28);
}

html[data-theme="light"] .window-header,
[data-theme="light"] .window-header {
  background: transparent !important;
  border-bottom-color: rgba(148, 163, 184, 0.25) !important;
}

html[data-theme="light"] .window-body,
[data-theme="light"] .window-body {
  background: #0b1220 !important;
  background-color: #0b1220 !important;
}

html[data-theme="light"] .window-body pre,
html[data-theme="light"] .window-body code,
[data-theme="light"] .window-body pre,
[data-theme="light"] .window-body code {
  color: #7dd3fc !important;
  -webkit-text-fill-color: #7dd3fc !important;
}

[data-theme="light"] .info-card,
[data-theme="light"] .vm-card {
  background: #ffffff !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-subtle);
}

[data-theme="light"] .vm-badge {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

[data-theme="light"] .navbar-brand .brand-apt {
  background: linear-gradient(135deg, #be123c, #7e22ce) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] .navbar-brand .brand-soft {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ---------- Buttons / pills / tags (white text was baked for dark cards) ---------- */
html[data-theme="light"] .filter-pill,
html[data-theme="light"] .category,
html[data-theme="light"] .technology-grid span,
html[data-theme="light"] .project-stack span,
html[data-theme="light"] .project-tech span,
html[data-theme="light"] .tag:not(.section-tag):not(.section-badge),
[data-theme="light"] .filter-pill,
[data-theme="light"] .category,
[data-theme="light"] .technology-grid span,
[data-theme="light"] .project-stack span,
[data-theme="light"] .project-tech span {
  background: #f4f0ff !important;
  background-color: #f4f0ff !important;
  border: 1px solid rgba(124, 58, 237, 0.28) !important;
  color: #4c1d95 !important;
  -webkit-text-fill-color: #4c1d95 !important;
}

html[data-theme="light"] .filter-pill.active,
html[data-theme="light"] .filter-pill:hover,
html[data-theme="light"] .category.active,
html[data-theme="light"] .category:hover,
html[data-theme="light"] .technology-grid span:hover,
[data-theme="light"] .filter-pill.active,
[data-theme="light"] .filter-pill:hover,
[data-theme="light"] .category.active,
[data-theme="light"] .category:hover,
[data-theme="light"] .technology-grid span:hover {
  background: linear-gradient(135deg, #e11d48, #7c3aed) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .btn-outline-light,
html[data-theme="light"] .btn-outline-primary,
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-outline-light,
[data-theme="light"] .btn-outline-primary {
  background: #ffffff !important;
  border: 1px solid rgba(9, 9, 11, 0.18) !important;
  color: #18181b !important;
  -webkit-text-fill-color: #18181b !important;
}

html[data-theme="light"] .btn-primary,
html[data-theme="light"] a.btn-primary,
html[data-theme="light"] .nav-actions .btn-primary,
[data-theme="light"] .btn-primary,
[data-theme="light"] a.btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Featured / card chips that still force white fill */
html[data-theme="light"] .featured-project-card,
[data-theme="light"] .featured-project-card {
  background: #ffffff !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-subtle) !important;
  color: var(--text-main) !important;
}

html[data-theme="light"] .est-opt,
html[data-theme="light"] .chip,
html[data-theme="light"] .pill:not(.section-tag),
[data-theme="light"] .est-opt,
[data-theme="light"] .chip {
  background: #f4f4f5 !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  -webkit-text-fill-color: var(--text-main) !important;
}

html[data-theme="light"] .est-opt.active,
html[data-theme="light"] .chip.active,
html[data-theme="light"] .chip.is-on,
[data-theme="light"] .est-opt.active,
[data-theme="light"] .chip.active {
  background: linear-gradient(135deg, #e11d48, #7c3aed) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: transparent !important;
}

/* Dark CTA bands keep navy chrome — force light text (global h2 rules were darkening them) */
html[data-theme="light"] .cta-box,
[data-theme="light"] .cta-box {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .cta-box h1,
html[data-theme="light"] .cta-box h2,
html[data-theme="light"] .cta-box h3,
html[data-theme="light"] .cta-box .section-title,
[data-theme="light"] .cta-box h1,
[data-theme="light"] .cta-box h2,
[data-theme="light"] .cta-box h3,
[data-theme="light"] .cta-box .section-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="light"] .cta-box p,
[data-theme="light"] .cta-box p {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

html[data-theme="light"] .cta-box .btn-outline,
html[data-theme="light"] .cta-box .btn-outline-primary,
html[data-theme="light"] .cta-box .btn-secondary,
html[data-theme="light"] .cta-box .btn-outline-light,
[data-theme="light"] .cta-box .btn-outline,
[data-theme="light"] .cta-box .btn-outline-primary,
[data-theme="light"] .cta-box .btn-secondary,
[data-theme="light"] .cta-box .btn-outline-light {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="light"] .cta-box .btn-primary,
[data-theme="light"] .cta-box .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="light"] .contact-badge,
html[data-theme="light"] .contact-badge span,
[data-theme="light"] .contact-badge,
[data-theme="light"] .contact-badge span {
  background: #f4f4f5 !important;
  border-color: rgba(9, 9, 11, 0.12) !important;
  color: #3f3f46 !important;
  -webkit-text-fill-color: #3f3f46 !important;
}

html[data-theme="light"] .contact-badge i,
[data-theme="light"] .contact-badge i {
  color: #e11d48 !important;
  -webkit-text-fill-color: #e11d48 !important;
}

html[data-theme="light"] .contact-hero .btn-outline-light,
[data-theme="light"] .contact-hero .btn-outline-light {
  background: #ffffff !important;
  color: #18181b !important;
  -webkit-text-fill-color: #18181b !important;
  border: 1px solid rgba(9, 9, 11, 0.2) !important;
}