/* ============================================================
   THEME OVERRIDES  —  css/theme.css
   Light mode component styles. Dark mode is handled by the
   default CSS. This file only covers [data-theme="light"].
   ============================================================ */

/* ── BASE ─────────────────────────────────────────────────── */
html[data-theme="light"] body {
  background: var(--bg-page);
  color: var(--text-primary);
}

/* ── THEME TOGGLE BUTTON (hidden until light mode is ready) ── */
.theme-toggle { display: none !important; }
.theme-toggle-hidden {
  background: none;
  border: 1px solid var(--border-cyan);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--cyan); color: var(--cyan); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ── COLOR TRANSITION (smooth theme switch) ──────────────── */
html { transition: background 0.4s ease, color 0.4s ease; }
body, nav, footer, .service-card, .value-card, .process-step,
.work-card, .form-input, .form-select, .form-textarea,
.nav-mobile-panel, .contact-section, .contact-info,
.contact-form-wrap, .cs-hero, .cs-section, .cs-overview,
.cs-next, .po-topbar, .po-body, .project-overlay {
  transition: background 0.4s ease, background-color 0.4s ease,
              color 0.4s ease, border-color 0.4s ease;
}

/* ── PRELOADER ──────────────────────────────────────────── */
html[data-theme="light"] .preloader {
  background: var(--bg-page);
}
html[data-theme="light"] .preloader-text {
  color: var(--text-primary);
}
html[data-theme="light"] .preloader-bar {
  background: var(--cyan);
}

/* ── NAV ─────────────────────────────────────────────────── */
html[data-theme="light"] nav.scrolled {
  background: var(--bg-nav);
}
html[data-theme="light"] nav::after {
  background: linear-gradient(to bottom, rgba(242,240,236,0.6), transparent);
}
html[data-theme="light"] .nav-links a {
  color: rgba(26,25,24,0.65);
}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active { color: var(--text-primary); }
html[data-theme="light"] .nav-logo-img { filter: none; }
html[data-theme="light"] .nav-hamburger span { background: var(--text-primary); }

/* Mobile nav panel */
html[data-theme="light"] .nav-mobile-panel {
  background: var(--bg-page);
  border-left-color: var(--border-cyan);
}
html[data-theme="light"] .nav-panel-links a { color: var(--text-primary); }
html[data-theme="light"] .nav-panel-divider { border-color: var(--border-cyan); }
html[data-theme="light"] .nav-panel-contact a { color: var(--text-muted); }
html[data-theme="light"] .nav-panel-social a { color: var(--text-faint); }

/* ── CUSTOM CURSOR ───────────────────────────────────────── */
html[data-theme="light"] .cursor {
  background: var(--cyan);
}
html[data-theme="light"] .cursor-ring {
  border-color: var(--cyan);
}

/* ── PAGE HERO (work, about, contact) ────────────────────── */
html[data-theme="light"] .page-hero {
  background: var(--bg-page);
}
html[data-theme="light"] .page-hero-grid {
  background-image:
    linear-gradient(rgba(106,176,176,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106,176,176,0.07) 1px, transparent 1px);
}
html[data-theme="light"] .page-hero-eyebrow { color: var(--coral); }
html[data-theme="light"] .page-hero-title { color: var(--text-primary); }
html[data-theme="light"] .page-hero-sub { color: var(--text-muted); }

/* ── HERO (home) ─────────────────────────────────────────── */
html[data-theme="light"] .hero { background: var(--bg-page); }
html[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(106,176,176,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106,176,176,0.07) 1px, transparent 1px);
}
html[data-theme="light"] .hero-eyebrow { color: var(--coral); }
html[data-theme="light"] .hero-title { color: var(--text-primary); }
html[data-theme="light"] .hero-sub { color: var(--text-muted); }
html[data-theme="light"] .hero-scroll .scroll-text { color: var(--text-faint); }
html[data-theme="light"] .hero-scroll .scroll-line { background: var(--border-cyan); }
html[data-theme="light"] .neural-canvas { opacity: 0.25; }

/* ── COLOR BAR ───────────────────────────────────────────── */
html[data-theme="light"] .color-bar { opacity: 0.7; }

/* ── MARQUEE ─────────────────────────────────────────────── */
html[data-theme="light"] .marquee-section {
  background: var(--dark);
  border-color: var(--border-cyan);
}
html[data-theme="light"] .marquee-item { color: rgba(26,25,24,0.45); }
html[data-theme="light"] .marquee-dot { background: var(--coral); opacity: 0.6; }

/* ── SECTION LABELS ──────────────────────────────────────── */
html[data-theme="light"] .section-label { color: var(--coral); }
html[data-theme="light"] .section-title { color: var(--text-primary); }
html[data-theme="light"] .section-title em { color: var(--text-primary); }

/* ── SERVICES ────────────────────────────────────────────── */
html[data-theme="light"] .service-card {
  background: var(--bg-card);
  border-color: var(--border-cyan);
}
html[data-theme="light"] .service-card:hover {
  background: var(--dark-mid);
  border-color: var(--cyan);
}
html[data-theme="light"] .service-num { color: rgba(26,25,24,0.2); }
html[data-theme="light"] .service-icon { stroke: var(--cyan); }
html[data-theme="light"] .service-name { color: var(--text-primary); }
html[data-theme="light"] .service-desc { color: var(--text-muted); }

/* ── ABOUT SECTION (home) ────────────────────────────────── */
html[data-theme="light"] .about-section { background: var(--bg-page); }
html[data-theme="light"] .about-content { background: var(--bg-page); }
html[data-theme="light"] .about-label { color: var(--coral); }
html[data-theme="light"] .about-title { color: var(--text-primary); }
html[data-theme="light"] .about-body { color: var(--text-muted); }
html[data-theme="light"] .stat-num { color: var(--text-primary); }
html[data-theme="light"] .stat-label { color: var(--text-faint); }

/* ── PROCESS ─────────────────────────────────────────────── */
html[data-theme="light"] .process-section { background: var(--bg-card); }
html[data-theme="light"] .process-step { border-color: var(--border-cyan); }
html[data-theme="light"] .process-num { color: rgba(106,176,176,0.25); }
html[data-theme="light"] .process-step-title { color: var(--text-primary); }
html[data-theme="light"] .process-step-desc { color: var(--text-muted); }

/* ── CTA SECTION ─────────────────────────────────────────── */
html[data-theme="light"] .cta-section { background: var(--bg-card); }
html[data-theme="light"] .cta-label { color: var(--coral); }
html[data-theme="light"] .cta-title { color: var(--text-primary); }

/* ── BUTTONS ─────────────────────────────────────────────── */
html[data-theme="light"] .btn-primary span { color: var(--bg-page); }
html[data-theme="light"] .btn-primary:hover span { color: var(--white); }
html[data-theme="light"] .btn-ghost { color: var(--text-muted); border-color: var(--border-cyan); }
html[data-theme="light"] .btn-ghost:hover { color: var(--text-primary); border-color: var(--cyan); }

/* ── WORK PAGE ───────────────────────────────────────────── */
html[data-theme="light"] .work-section { background: var(--bg-page); }
html[data-theme="light"] .work-cat { color: var(--coral); }
html[data-theme="light"] .work-title { color: var(--white); }
html[data-theme="light"] .work-year { color: rgba(245,245,242,0.45); }
html[data-theme="light"] .work-footer-note p { color: var(--text-muted); }
html[data-theme="light"] .work-footer-note { border-color: var(--border-cyan); }

/* Work card CTA button */
html[data-theme="light"] .work-card-cta {
  background: rgba(242,240,236,0.55);
  border-color: rgba(106,176,176,0.4);
  color: #1a1918;
}

/* Project overlay */
html[data-theme="light"] .project-overlay { background: var(--bg-page); }
html[data-theme="light"] .po-topbar {
  background: rgba(242,240,236,0.96);
  border-color: var(--border-cyan);
}
html[data-theme="light"] .po-back,
html[data-theme="light"] .po-close { color: var(--text-muted); }
html[data-theme="light"] .po-back:hover,
html[data-theme="light"] .po-close:hover { color: var(--text-primary); }
html[data-theme="light"] .po-cat { color: var(--coral); }
html[data-theme="light"] .po-name { color: var(--text-primary); }
html[data-theme="light"] .po-meta-label { color: var(--text-faint); }
html[data-theme="light"] .po-meta-value { color: var(--text-primary); }
html[data-theme="light"] .po-project-desc { color: var(--text-muted); }
html[data-theme="light"] .po-zoom { background: rgba(242,240,236,0.97); }
html[data-theme="light"] .po-zoom-nav,
html[data-theme="light"] .po-zoom-close {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
  color: var(--text-primary);
}
html[data-theme="light"] .po-zoom-counter { color: var(--text-faint); }

/* ── ABOUT PAGE ──────────────────────────────────────────── */
html[data-theme="light"] .story-section { background: var(--bg-page); }
html[data-theme="light"] .story-label { color: var(--coral); }
html[data-theme="light"] .story-title { color: var(--text-primary); }
html[data-theme="light"] .story-body { color: var(--text-muted); }
html[data-theme="light"] .values-section { background: var(--bg-card); }
html[data-theme="light"] .value-card {
  background: var(--bg-surface);
  border-color: var(--border-cyan);
}
html[data-theme="light"] .value-icon { stroke: var(--cyan); }
html[data-theme="light"] .value-title { color: var(--text-primary); }
html[data-theme="light"] .value-desc { color: var(--text-muted); }

/* ── CONTACT PAGE ────────────────────────────────────────── */
html[data-theme="light"] .contact-section { background: var(--bg-page); }
html[data-theme="light"] .contact-info {
  background: var(--bg-page);
  border-color: var(--border-cyan);
}
html[data-theme="light"] .contact-info-label { color: var(--coral); }
html[data-theme="light"] .contact-info-value { color: var(--text-primary); }
html[data-theme="light"] .contact-social a { color: var(--text-muted); }
html[data-theme="light"] .contact-response p { color: var(--text-faint); }
html[data-theme="light"] .contact-form-wrap { background: var(--bg-page); }
html[data-theme="light"] .form-label { color: var(--text-muted); }
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-textarea {
  background: var(--bg-input);
  border-color: var(--border-cyan);
  color: var(--text-primary);
}
html[data-theme="light"] .form-input::placeholder,
html[data-theme="light"] .form-textarea::placeholder { color: var(--text-faint); }
html[data-theme="light"] .form-input:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] .form-textarea:focus {
  border-color: var(--cyan);
  background: rgba(0,0,0,0.06);
}
html[data-theme="light"] .form-success {
  background: var(--bg-card);
  border-color: var(--border-cyan);
}
html[data-theme="light"] .form-success h3 { color: var(--text-primary); }
html[data-theme="light"] .form-success p { color: var(--text-muted); }

/* ── CASE STUDY PAGES ────────────────────────────────────── */
html[data-theme="light"] .cs-hero { background: var(--bg-page) !important; }
html[data-theme="light"] .cs-hero-bg { opacity: 0.3; }
html[data-theme="light"] .cs-category { color: var(--coral); }
html[data-theme="light"] .cs-title { color: var(--text-primary); }
html[data-theme="light"] .cs-meta-label { color: var(--text-faint); }
html[data-theme="light"] .cs-meta-value { color: var(--text-primary); }
html[data-theme="light"] .cs-overview { background: var(--bg-page); border-color: var(--border-cyan); }
html[data-theme="light"] .cs-brief { color: var(--text-muted); }
html[data-theme="light"] .cs-deliverables-list li { color: var(--text-muted); }
html[data-theme="light"] .cs-section { background: var(--bg-page); border-color: var(--border-cyan); }
html[data-theme="light"] .cs-section-title { color: var(--text-primary); }
html[data-theme="light"] .cs-body { color: var(--text-muted); }
html[data-theme="light"] .cs-back { color: var(--text-muted); border-color: var(--border-cyan); }
html[data-theme="light"] .cs-back:hover { color: var(--text-primary); border-color: var(--cyan); }
html[data-theme="light"] .cs-next { border-color: var(--border-cyan); }
html[data-theme="light"] .cs-next-item { border-color: var(--border-cyan); }
html[data-theme="light"] .cs-next-dir { color: var(--text-faint); }
html[data-theme="light"] .cs-next-title { color: var(--text-primary); }
html[data-theme="light"] .cs-next-cat { color: var(--coral); }
html[data-theme="light"] .cs-visual-placeholder {
  background: var(--bg-card);
  border-color: var(--border-cyan);
}
html[data-theme="light"] .cs-visual-placeholder-inner span { color: var(--text-faint); }

/* ── FOOTER ──────────────────────────────────────────────── */
html[data-theme="light"] footer {
  background: var(--bg-card);
  border-color: var(--border-cyan);
}
html[data-theme="light"] .footer-logo-img { filter: none; opacity: 0.8; }
html[data-theme="light"] .footer-tagline { color: var(--text-muted); }
html[data-theme="light"] .footer-col-title { color: var(--text-primary); }
html[data-theme="light"] .footer-col-links a { color: var(--text-muted); }
html[data-theme="light"] .footer-col-links a:hover { color: var(--cyan); }
html[data-theme="light"] .footer-copy { color: var(--text-faint); }
html[data-theme="light"] .footer-social a { color: var(--text-faint); }
html[data-theme="light"] .footer-bottom { border-color: var(--border-cyan); }

/* ── ADDITIONAL LIGHT MODE FIXES ─────────────────────────── */

/* Contact inline-extracted classes */
html[data-theme="light"] .contact-working-text { color: var(--text-muted); }
html[data-theme="light"] .form-submit-note { color: var(--text-faint); }
html[data-theme="light"] .form-success p { color: var(--text-muted); }
html[data-theme="light"] .form-success h3 { color: var(--text-primary); }
html[data-theme="light"] .form-success-icon { stroke: var(--cyan); }

/* Home work cards */
html[data-theme="light"] .work-card { background: var(--bg-card); }
html[data-theme="light"] .work-cat { color: var(--coral); }
html[data-theme="light"] .work-title { color: #ffffff; }
html[data-theme="light"] .work-section { background: var(--bg-page); }
html[data-theme="light"] .work-header .section-label { color: var(--coral); }
html[data-theme="light"] .work-header .section-title { color: var(--text-primary); }

/* About page specific */
html[data-theme="light"] #about,
html[data-theme="light"] .about-section { background: var(--bg-page); }
html[data-theme="light"] .about-visual { background: var(--bg-card); }
html[data-theme="light"] .about-visual-inner { background: var(--bg-card); }
html[data-theme="light"] .about-body { color: var(--text-muted); }
html[data-theme="light"] .about-body strong { color: var(--text-primary); }

/* Process section */
html[data-theme="light"] .process-section { background: var(--bg-card); }
html[data-theme="light"] .process-step { border-color: var(--border-cyan); background: transparent; }
html[data-theme="light"] .process-num { color: rgba(106,176,176,0.3); }
html[data-theme="light"] .process-step-title { color: var(--text-primary); }
html[data-theme="light"] .process-step-desc { color: var(--text-muted); }

/* CTA */
html[data-theme="light"] .cta-section { background: var(--bg-card); }
html[data-theme="light"] .cta-title { color: var(--text-primary); }
html[data-theme="light"] .cta-label { color: var(--coral); }

/* Buttons in light mode */
html[data-theme="light"] .btn-primary {
  background: var(--cyan);
  border-color: var(--cyan);
}
html[data-theme="light"] .btn-primary span { color: #fff; }

/* Services section heading */
html[data-theme="light"] #services { background: var(--bg-page); }

/* Contact response */
html[data-theme="light"] .contact-response p { color: var(--text-faint); }

/* Stats */
html[data-theme="light"] .about-stats > div { border-color: var(--border-cyan); }

/* Scroll indicator */
html[data-theme="light"] .hero-scroll .scroll-text { color: var(--text-faint); }

/* Mobile responsive overrides for overlay */
@media (max-width: 768px) {
  html[data-theme="light"] .po-topbar { background: rgba(242,240,236,0.97); }
}

/* Home work card arrow in light mode */
html[data-theme="light"] .work-card-arrow {
  color: var(--pastel-cyan);
  border-color: rgba(106,176,176,0.4);
}