/* ============================================================
   iamNK — Services LIGHT theme overlay
   Enabled only when [data-theme="light"] (see theme.js).
   Redefines the services page's CSS variables + a few hardcoded
   surfaces to flip the dark design into a clean light one.
   ============================================================ */

html[data-theme='light'] {
  --c-ink: #f4f6fb;
  --c-ink-soft: #ffffff;
  --c-white: #0d1424;
  --c-muted: #5b6678;

  --glass: rgba(13, 20, 36, 0.04);
  --glass-border: rgba(13, 20, 36, 0.10);

  --shadow-soft: 0 10px 34px rgba(20, 30, 50, 0.10);
  --shadow-glow: 0 0 50px rgba(124, 58, 237, 0.18);
}

html[data-theme='light'] body {
  background:
    radial-gradient(1100px 620px at 85% -12%, rgba(124, 58, 237, 0.10), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(6, 182, 212, 0.10), transparent 55%),
    #f4f6fb;
}

/* Aurora blobs softer on light */
html[data-theme='light'] .aurora {
  background: radial-gradient(ellipse at top, #eef1f8 0%, #f4f6fb 60%);
}
html[data-theme='light'] .aurora::before {
  background: radial-gradient(circle, rgba(124, 58, 237, 0.30), transparent 70%);
  opacity: 0.4;
}
html[data-theme='light'] .aurora::after {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.30), transparent 70%);
  opacity: 0.4;
}
html[data-theme='light'] .aurora-blob {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.25), transparent 70%);
  opacity: 0.35;
}

html[data-theme='light'] .watermark {
  color: rgba(13, 20, 36, 0.04);
}

/* Nav */
html[data-theme='light'] .nav {
  background: rgba(244, 246, 251, 0.7);
  border-bottom: 1px solid rgba(13, 20, 36, 0.08);
}
html[data-theme='light'] .nav.scrolled { background: rgba(244, 246, 251, 0.92); }
html[data-theme='light'] .nav-links a { color: var(--c-muted); }
html[data-theme='light'] .nav-links a:hover { color: var(--c-white); }

/* Hero text stays vivid; subtitle muted */
html[data-theme='light'] .hero-desc { color: var(--c-muted); }

/* Cards: subtle borders, readable text */
html[data-theme='light'] .card p { color: var(--c-muted); }
html[data-theme='light'] .step p { color: var(--c-muted); }
html[data-theme='light'] .section-sub { color: var(--c-muted); }

/* CTA card: light surface with gradient ring */
html[data-theme='light'] .cta-card { background: #ffffff; }
html[data-theme='light'] .cta-card::after { background: #ffffff; }
html[data-theme='light'] .cta-card p { color: var(--c-muted); }

/* Statband keeps its vivid gradient (looks great on light too) */
html[data-theme='light'] .statband-inner { box-shadow: 0 18px 50px rgba(124, 58, 237, 0.25); }

/* FAQ */
html[data-theme='light'] .faq-a { color: var(--c-muted); }

/* Footer */
html[data-theme='light'] .footer {
  background: rgba(13, 20, 36, 0.04);
}
html[data-theme='light'] .footer-links a { color: var(--c-muted); }
html[data-theme='light'] .footer-copy { color: var(--c-muted); }

/* Contact form inputs → light surfaces */
html[data-theme='light'] .contact-field label { color: var(--c-ink); }
html[data-theme='light'] .contact-field input,
html[data-theme='light'] .contact-field select,
html[data-theme='light'] .contact-field textarea {
  background: #ffffff;
  border-color: rgba(13, 20, 36, 0.12);
  color: var(--c-ink);
}
html[data-theme='light'] .contact-field input::placeholder,
html[data-theme='light'] .contact-field textarea::placeholder { color: #9aa3b8; }
html[data-theme='light'] .contact-field select option { color: #0d1424; }

/* Theme toggle button (light variant) */
html[data-theme='light'] .theme-toggle {
  background: rgba(13, 20, 36, 0.06);
  border-color: rgba(13, 20, 36, 0.12);
  color: var(--c-ink);
}