/* Runtime theme enforcement — loads last; maps Appearance tokens to real UI */
:root{
  --accent:var(--blue);
}

body{
  color:var(--text);
  background:var(--section-light);
}

/* Light surfaces */
.section-light,
.reviews-section,
.vehicle-type-section{
  background:var(--section-light);
  color:var(--text);
}
.services-section,
.section-muted{
  background:var(--section-muted);
  color:var(--text);
}
.section-heading h2,
.service-card h3,
.benefit-card h3,
.process-card h3,
.suggest-card h3,
.review-author strong,
.faq-item summary,
.why-service-card h3,
.related-card h3{
  color:var(--text);
}
.section-heading p,
.section-note,
.service-card p,
.benefit-card p,
.process-card p,
.process-step p,
.review-card p,
.suggest-card p,
.why-service-card p,
.review-author small{
  color:var(--muted);
}
.eyebrow{
  color:var(--blue-deep);
  font-weight:800;
}

/* Dark surfaces */
.section-dark,
.wash-included,
.carwash-included,
.stats-strip,
.site-header,
.site-footer,
.final-cta,
.hero,
.utility-bar,
.approach-section{
  color:var(--text-on-dark);
}
.section-dark .section-heading h2,
.wash-included .section-heading h2,
.carwash-included .section-heading h2,
.final-cta h2,
.hero h1,
.approach-section .section-heading h2{
  color:var(--text-on-dark);
}
.section-dark .eyebrow,
.wash-included .eyebrow,
.carwash-included .eyebrow,
.hero .eyebrow,
.final-cta .eyebrow,
.approach-section .eyebrow{
  color:var(--blue-2);
}
.section-dark .section-note,
.wash-included .section-note,
.hero p,
.final-cta p{
  color:var(--muted-on-dark);
}

/* Brand accent (bright) vs button fill (readable) */
.hero h1 span,
.final-cta h2 span,
.text-link,
a.text-link{
  color:var(--accent);
}
.stars{color:var(--accent)}

/* Solid CTAs */
.btn-primary,
.button:not(.button--outline):not(.button--quiet),
.btn.btn-primary,
a.btn-primary,
button.btn-primary,
.login-submit,
.submit-btn{
  background:var(--blue) !important;
  border-color:var(--blue) !important;
  color:#fff !important;
}
.btn-primary:hover,
.button:not(.button--outline):not(.button--quiet):hover,
a.btn-primary:hover,
button.btn-primary:hover,
.login-submit:hover,
.submit-btn:hover{
  background:var(--blue-deep) !important;
  border-color:var(--blue-deep) !important;
  color:#fff !important;
}

/* Shared elevated light cards (process, why/trust, benefits, suggest, FAQ, reviews) */
.carwash-process,
.why-service,
.carwash-why,
.carwash-faq,
.reviews-section{
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    var(--section-muted);
}

.process-card,
.why-service-card,
.carwash-why .why-service-card,
.benefit-card,
.suggest-card,
.faq-item,
.review-card,
.related-card,
.ppf-related-card,
.carwash-intro-benefits article,
.mini-benefit-grid>div{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--accent) 10%, #fff) 0%, var(--card) 42%, var(--surface) 100%) !important;
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line)) !important;
  color:var(--text) !important;
  box-shadow:
    0 14px 34px rgba(10,18,32,.10),
    inset 0 1px 0 rgba(255,255,255,.65) !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.process-card::before,
.why-service-card::before,
.carwash-why .why-service-card::before,
.benefit-card::before,
.suggest-card::before,
.faq-item::before,
.review-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg, var(--blue), var(--accent));
  z-index:1;
}
.process-card:hover,
.why-service-card:hover,
.carwash-why .why-service-card:hover,
.benefit-card:hover,
.suggest-card:hover,
.review-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
  box-shadow:
    0 22px 44px rgba(10,18,32,.16),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

.process-card h3,
.why-service-card h3,
.carwash-why .why-service-card h3,
.benefit-card h3,
.suggest-card h3,
.review-author strong,
.faq-item summary{color:var(--text) !important}
.process-card p,
.why-service-card p,
.carwash-why .why-service-card p,
.benefit-card p,
.suggest-card p,
.review-card p{color:var(--muted) !important}

.process-card-num{
  background:linear-gradient(145deg, var(--blue), var(--blue-deep)) !important;
  color:#fff !important;
}
.process-card-icon,
.why-service-icon,
.carwash-why .why-service-icon,
.benefit-icon{
  color:var(--blue-deep) !important;
  border-color:color-mix(in srgb, var(--accent) 35%, transparent) !important;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 28%, #fff), color-mix(in srgb, var(--accent) 10%, var(--surface))) !important;
}

/* Light cards that stay simpler (service tiles keep image focus) */
.service-card{
  background:var(--card);
  color:var(--text);
  border-color:var(--line);
}

/* Contact cards on light strip */
.contact-card-strip{
  background:var(--section-muted);
}
.contact-card{
  background:var(--card) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
}
.contact-card h3{
  color:var(--text) !important;
}
.contact-card p,
.contact-card a{
  color:var(--muted) !important;
}
.contact-card .contact-card-link,
.contact-card a.contact-card-link{
  color:var(--blue-deep) !important;
  font-weight:700;
}
.contact-card-icon{
  color:var(--accent) !important;
}

/* Approach on dark — readable light type, no white panels */
.approach-section .approach-card,
.section-dark .approach-card{
  background:transparent !important;
  box-shadow:none !important;
  color:var(--text-on-dark) !important;
}
.approach-section .approach-card h3,
.section-dark .approach-card h3{
  color:var(--text-on-dark) !important;
}
.approach-section .approach-card p,
.section-dark .approach-card p{
  color:var(--muted-on-dark) !important;
}
.approach-section .large-line-icon,
.section-dark .large-line-icon{
  color:var(--blue-2);
  border-color:var(--accent);
}

/* Before & After — labels must read on dark section */
.section-dark .compare-card,
.carwash-before .compare-card,
.ceramic-before .compare-card,
.ppf-before .compare-card,
.wrapping-before .compare-card,
.window-film-before .compare-card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.section-dark .compare-card h3,
.carwash-before .compare-card h3,
.ceramic-before .compare-card h3,
.ppf-before .compare-card h3,
.wrapping-before .compare-card h3,
.window-film-before .compare-card h3,
.compare-label-dark{
  color:#fff !important;
  background:transparent !important;
  -webkit-text-fill-color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.compare-image{
  background:#070b12 !important;
}
.compare-image img{
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* Dark wash cards */
.wash-included .wash-item,
.carwash-included .wash-item{
  background:var(--card-dark);
  color:var(--text-on-dark);
}
.wash-included .wash-item strong,
.carwash-included .wash-item strong{color:var(--text-on-dark)}
.wash-included .wash-item small,
.carwash-included .wash-item small{color:var(--muted-on-dark)}
.wash-included .line-icon,
.carwash-included .line-icon{
  color:var(--blue-2);
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  border-color:color-mix(in srgb, var(--accent) 40%, transparent);
}

.primary-nav a.active:after,
.primary-nav a:hover:after,
.nav-dropdown__trigger.active:after,
.nav-dropdown__trigger:hover:after,
.nav-dropdown:hover .nav-dropdown__trigger:after,
.nav-dropdown:focus-within .nav-dropdown__trigger:after{
  background:var(--accent);
}

.faq-item,
.form-panel,
.quote-panel{
  background:var(--surface);
}