/* ═══════════════════════════════════════════════════
   DEVVNEX — Full light / dark theme
   ═══════════════════════════════════════════════════ */

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

html {
  color-scheme: dark;
  background: var(--bg-base);
}

/* Theme toggle — fast surface fade only (no universal *) */
@media (prefers-reduced-motion: no-preference) {
  html.theme-transition {
    transition: background-color 0.22s ease-out;
  }

  html.theme-transition body,
  html.theme-transition .page-wrapper,
  html.theme-transition .vx-page,
  html.theme-transition .inner-page,
  html.theme-transition .fn-nav,
  html.theme-transition .fn-footer,
  html.theme-transition .fn-section,
  html.theme-transition .fn-section--alt,
  html.theme-transition .fn-page-hero,
  html.theme-transition .fn-page-cta,
  html.theme-transition .fn-cta-band,
  html.theme-transition .fn-cta-band__frame,
  html.theme-transition .vx-hero,
  html.theme-transition .vx-marquee,
  html.theme-transition .vx-manifesto,
  html.theme-transition .vx-work,
  html.theme-transition .vx-services,
  html.theme-transition .vx-studio,
  html.theme-transition .vx-process,
  html.theme-transition .vx-contact,
  html.theme-transition .vx-impact,
  html.theme-transition .vx-quote,
  html.theme-transition .vx-faq,
  html.theme-transition .vx-voices,
  html.theme-transition .vx-journal,
  html.theme-transition .vx-industries,
  html.theme-transition .vx-stack,
  html.theme-transition .vx-stack__marquee,
  html.theme-transition .ab-hero,
  html.theme-transition .ab-story,
  html.theme-transition .ab-principles,
  html.theme-transition .ab-founders,
  html.theme-transition .ab-cta,
  html.theme-transition .fn-theme-toggle {
    transition: background-color 0.22s ease-out, color 0.22s ease-out, border-color 0.22s ease-out;
  }
}

/* View Transitions API — smoothest path, single compositor layer */
@supports (view-transition-name: root) {
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: 0.28s;
      animation-timing-function: ease-out;
    }
  }
}

/* Theme image swap — brief hide until src synced */
img[src*="/assets/images/"] {
  transition: opacity 0.28s ease;
}
img[src*="/assets/images/"]:not([data-theme-synced]) {
  opacity: 0;
}
html.theme-images-ready img[src*="/assets/images/"] {
  opacity: 1;
}

/* ─── Global surfaces ─── */
[data-theme="light"] body,
[data-theme="light"] .page-wrapper,
[data-theme="light"] .vx-page,
[data-theme="light"] .inner-page,
[data-theme="light"] .fn-footer,
[data-theme="light"] .mobile-menu,
[data-theme="light"] .mobile-menu.fn-mobile {
  background: var(--bg-base);
  color: var(--text-primary);
}

[data-theme="light"] body::after {
  opacity: 0.035;
}

/* ─── Nav ─── */
[data-theme="light"] .fn-nav.scrolled,
[data-theme="light"] .navbar.scrolled {
  background: var(--bg-glass);
  border-bottom-color: var(--border);
}

/* ─── Sections (homepage) ─── */
[data-theme="light"] .vx-hero__visual img,
[data-theme="light"] .vx-post__preview img[src*="-light"],
[data-theme="light"] .vx-sector__bg img[src*="-light"] {
  filter: none;
}

[data-theme="light"] .vx-hero:hover .vx-hero__visual img {
  filter: brightness(1.02);
}

[data-theme="light"] .vx-work__preview-frame img:not([src*="-light"]),
[data-theme="light"] .pf-preview__frame img:not([src*="-light"]),
[data-theme="light"] .pf-hero__visual img:not([src*="-light"]),
[data-theme="light"] .pf-case__media img:not([src*="-light"]),
[data-theme="light"] .sv-hero__visual img:not([src*="-light"]),
[data-theme="light"] .sv-band__frame img:not([src*="-light"]),
[data-theme="light"] .sv-preview__frame img:not([src*="-light"]),
[data-theme="light"] .bl-feature__media img:not([src*="-light"]),
[data-theme="light"] .bl-card__media img:not([src*="-light"]),
[data-theme="light"] .vx-process__preview img,
[data-theme="light"] .vx-post__preview img:not([src*="-light"]),
[data-theme="light"] .vx-sector__bg img:not([src*="-light"]),
[data-theme="light"] .fn-detail__img img:not([src*="-light"]),
[data-theme="light"] .portfolio-card img:not([src*="-light"]),
[data-theme="light"] .fn-portfolio-card img:not([src*="-light"]) {
  filter: var(--img-filter-ui);
}

[data-theme="light"] .vx-work__preview-frame img[src*="-light"],
[data-theme="light"] .pf-preview__frame img[src*="-light"],
[data-theme="light"] .pf-hero__visual img[src*="-light"],
[data-theme="light"] .pf-case__media img[src*="-light"],
[data-theme="light"] .sv-hero__visual img[src*="-light"],
[data-theme="light"] .sv-band__frame img[src*="-light"],
[data-theme="light"] .sv-preview__frame img[src*="-light"],
[data-theme="light"] .bl-feature__media img[src*="-light"],
[data-theme="light"] .bl-card__media img[src*="-light"],
[data-theme="light"] .portfolio-card img[src*="-light"],
[data-theme="light"] .fn-portfolio-card img[src*="-light"],
[data-theme="light"] .fn-detail__img img[src*="-light"] {
  filter: none;
}

[data-theme="light"] .vx-hero__visual-cap,
[data-theme="light"] .pf-hero__cap,
[data-theme="light"] .sv-hero__cap {
  background: var(--bg-card);
}

[data-theme="light"] .vx-impact {
  background: var(--bg-band);
}

[data-theme="light"] .vx-impact__item strong {
  color: var(--accent);
}

[data-theme="light"] .vx-impact__item span {
  color: var(--text-secondary);
}

[data-theme="light"] .vx-marquee,
[data-theme="light"] .vx-manifesto,
[data-theme="light"] .vx-studio,
[data-theme="light"] .vx-process,
[data-theme="light"] .vx-industries,
[data-theme="light"] .vx-journal,
[data-theme="light"] .vx-stack,
[data-theme="light"] .vx-voices,
[data-theme="light"] .vx-faq,
[data-theme="light"] .fn-section--alt,
[data-theme="light"] .section--alt {
  background: var(--bg-section-alt);
}

[data-theme="light"] .vx-work,
[data-theme="light"] .vx-services,
[data-theme="light"] .vx-quote,
[data-theme="light"] .fn-section,
[data-theme="light"] .section,
[data-theme="light"] .fn-page-hero {
  background: var(--bg-base);
}

[data-theme="light"] .vx-hero,
[data-theme="light"] .fn-page-hero {
  background: var(--gradient-hero), var(--bg-base);
}

/* ─── Cards & panels ─── */
[data-theme="light"] .vx-work__preview,
[data-theme="light"] .pf-preview,
[data-theme="light"] .pf-case__frame,
[data-theme="light"] .sv-hero__visual,
[data-theme="light"] .sv-band__frame,
[data-theme="light"] .sv-preview,
[data-theme="light"] .bl-feature__media,
[data-theme="light"] .bl-card__media,
[data-theme="light"] .ct-panel,
[data-theme="light"] .vx-svc,
[data-theme="light"] .vx-post__preview,
[data-theme="light"] .vx-voice,
[data-theme="light"] .vx-sector,
[data-theme="light"] .vx-manifesto__item,
[data-theme="light"] .vx-process__preview,
[data-theme="light"] .portfolio-card,
[data-theme="light"] .blog-card,
[data-theme="light"] .fn-team-card,
[data-theme="light"] .fn-value,
[data-theme="light"] .fn-detail__img,
[data-theme="light"] .fn-form input,
[data-theme="light"] .fn-form textarea,
[data-theme="light"] .fn-form select,
[data-theme="light"] .accordion-item,
[data-theme="light"] .fn-stat-row > div,
[data-theme="light"] .fn-case-stats > div,
[data-theme="light"] .fn-blog-card,
[data-theme="light"] .fn-portfolio-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* ─── Images ─── */
[data-theme="light"] .vx-svc__thumb img:not([src*="-light"]),
[data-theme="light"] .blog-card img:not([src*="-light"]) {
  filter: var(--img-filter-ui);
}

[data-theme="light"] .vx-svc__thumb img[src*="-light"],
[data-theme="light"] .blog-card img[src*="-light"] {
  filter: none;
}

[data-theme="light"] .vx-svc:hover .vx-svc__thumb img:not([src*="-light"]) {
  filter: var(--img-filter-ui-hover);
}

[data-theme="light"] .vx-work__preview-shade,
[data-theme="light"] .pf-preview__shade,
[data-theme="light"] .sv-preview__shade {
  background: linear-gradient(180deg, transparent 40%, var(--overlay-fade) 100%);
}

/* ─── Hero decorations ─── */
[data-theme="light"] .vx-ambient__orb--1 {
  background: radial-gradient(circle, var(--orb-1), transparent 70%);
}
[data-theme="light"] .vx-ambient__orb--2 {
  background: radial-gradient(circle, var(--orb-2), transparent 70%);
}

/* ─── Buttons ─── */
[data-theme="light"] .vx-btn--primary,
[data-theme="light"] .fn-btn--primary,
[data-theme="light"] .fn-btn.fn-btn--primary {
  background: var(--accent-bright);
  color: var(--on-accent);
  border-color: var(--accent-bright);
}

[data-theme="light"] .vx-btn--primary:hover,
[data-theme="light"] .fn-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

[data-theme="light"] .fn-btn:hover,
[data-theme="light"] .vx-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

[data-theme="light"] .fn-nav__cta {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

[data-theme="light"] .fn-nav__cta:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─── Contact band ─── */
[data-theme="light"] .vx-contact {
  background: var(--accent);
  color: var(--on-accent);
}

[data-theme="light"] .vx-contact h2 span {
  color: var(--on-accent-muted);
  -webkit-text-stroke: 1px var(--on-accent-stroke);
}

[data-theme="light"] .vx-contact .vx-btn-magnetic {
  background: var(--on-accent);
  color: var(--accent);
}

[data-theme="light"] .vx-contact__email,
[data-theme="light"] .vx-contact__links a:not(.vx-btn-magnetic) {
  color: var(--on-accent);
  border-color: var(--on-accent-border);
}

/* ─── Footer CTA ─── */
[data-theme="light"] .fn-page-cta,
[data-theme="light"] .fn-cta-band__frame {
  background: var(--accent);
  color: #ffffff;
  border: none;
}

[data-theme="light"] .fn-page-cta h2,
[data-theme="light"] .fn-cta-band__copy h2 {
  color: #ffffff;
}

[data-theme="light"] .fn-page-cta p,
[data-theme="light"] .fn-cta-band__copy p {
  color: rgba(255, 255, 255, 0.88);
}

[data-theme="light"] .fn-page-cta .fn-btn,
[data-theme="light"] .fn-cta-band__btn {
  background: #111110;
  border-color: #111110;
  color: #f0eee9;
}

[data-theme="light"] .fn-page-cta .fn-btn:hover,
[data-theme="light"] .fn-cta-band__btn:hover {
  background: #ffffff;
  color: #111110;
  border-color: #ffffff;
}

[data-theme="light"] .fn-footer {
  border-top: 1px solid var(--border);
}

[data-theme="light"] .fn-footer__top {
  border-bottom-color: var(--border);
}

/* ─── Forms ─── */
[data-theme="light"] .fn-form input,
[data-theme="light"] .fn-form textarea,
[data-theme="light"] .fn-form select {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

[data-theme="light"] .fn-form input:focus,
[data-theme="light"] .fn-form textarea:focus,
[data-theme="light"] .fn-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ─── Accordion ─── */
[data-theme="light"] .accordion-trigger {
  color: var(--text-primary);
  border-color: var(--border);
}

[data-theme="light"] .accordion-body {
  color: var(--text-secondary);
}

/* ─── Selection & skip ─── */
[data-theme="light"] .vx-page::selection,
[data-theme="light"] ::selection {
  background: var(--accent-bright);
  color: var(--on-accent);
}

[data-theme="light"] .fn-skip {
  background: var(--accent-bright);
  color: var(--on-accent);
}

/* ─── Theme toggle ─── */
.fn-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.fn-theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.fn-theme-toggle__icon {
  position: relative;
  width: 16px;
  height: 16px;
}
.fn-theme-toggle__icon::before,
.fn-theme-toggle__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.fn-theme-toggle__icon::before {
  border-radius: 50%;
  box-shadow: inset -4px -3px 0 0 currentColor;
  opacity: 1;
  transform: scale(1);
}
.fn-theme-toggle__icon::after {
  opacity: 0;
  transform: scale(0.6) rotate(-45deg);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px currentColor;
  background:
    linear-gradient(currentColor, currentColor) center/100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center/2px 100% no-repeat;
}
[data-theme="light"] .fn-theme-toggle__icon::before {
  opacity: 0;
  transform: scale(0.6) rotate(45deg);
}
[data-theme="light"] .fn-theme-toggle__icon::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* ─── Prose / legal ─── */
[data-theme="light"] .fn-prose h2,
[data-theme="light"] .fn-prose h3 {
  color: var(--text-primary);
}

[data-theme="light"] .fn-prose p,
[data-theme="light"] .fn-prose li {
  color: var(--text-secondary);
}

/* ─── Logo ─── */
[data-theme="light"] .fn-logo__nex {
  color: var(--accent-bright);
  text-shadow: 0 0 20px var(--accent-glow);
}

[data-theme="light"] .fn-logo:hover .fn-logo__nex {
  color: var(--accent);
  text-shadow: none;
}

[data-theme="light"] .vx-line--accent,
[data-theme="light"] .fn-page-hero h1 .hl {
  color: var(--accent);
}

[data-theme="light"] .vx-marquee__track span:nth-child(4n) {
  color: var(--accent-bright);
}