/**
 * Light/dark surface retokenization — loads after theme-tokens.css.
 * Overrides hard-coded dark values in component CSS via semantic tokens.
 */

/* ── Nav chrome ── */
body > nav {
  background: var(--nav-backdrop);
}

.nav-tagline {
  color: var(--text-muted);
}

.nav-tagline__line.is-typing::after {
  background: var(--text-muted);
}

html[data-theme='light'] .nav-more__btn,
html[data-theme='light'] .nav-links a {
  color: var(--chrome-fg-muted);
}

html[data-theme='light'] .nav-more__panel {
  background: var(--mobile-menu-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-elevated);
}

html[data-theme='light'] .mobile-menu {
  background: var(--mobile-menu-bg);
  border-color: var(--mobile-menu-border);
}

html[data-theme='light'] .mobile-menu a,
html[data-theme='light'] .mobile-menu .nav-more__btn {
  color: var(--chrome-fg);
}

html[data-theme='light'] .mobile-menu .nav-more__panel a {
  color: var(--chrome-fg-muted);
}

/* ── Content links / pills ── */
html[data-theme='light'] .silo-main a.content-link:is(:link, :visited),
html[data-theme='light'] .guides-page a.content-link:is(:link, :visited) {
  color: var(--content-link-text);
  background: var(--content-link-bg);
  border-color: var(--content-link-border);
}

html[data-theme='light'] body.region-uk .silo-main a.content-link:is(:link, :visited) {
  color: var(--link-uk);
  border-color: color-mix(in srgb, var(--link-uk) 35%, var(--border));
  background: color-mix(in srgb, var(--link-uk) 10%, transparent);
}

html[data-theme='light'] body.region-za .silo-main a.content-link:is(:link, :visited) {
  color: var(--link-za);
  border-color: color-mix(in srgb, var(--link-za) 35%, var(--border));
  background: color-mix(in srgb, var(--link-za) 10%, transparent);
}

html[data-theme='light'] body.region-us .silo-main a.content-link:is(:link, :visited) {
  color: var(--link-us);
  border-color: color-mix(in srgb, var(--link-us) 35%, var(--border));
  background: color-mix(in srgb, var(--link-us) 10%, transparent);
}

html[data-theme='light'] .silo-main a.content-link:hover,
html[data-theme='light'] .silo-main a.content-link:focus-visible {
  color: var(--text-main);
  background: color-mix(in srgb, #3b82f6 14%, var(--surface));
  border-color: rgba(59, 130, 246, 0.35);
}

/* ── Pricing / authority cards ── */
.pricing-card {
  background: var(--panel-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

.pricing-card-icon-wrap {
  border-color: var(--border);
  background: var(--surface-band);
}

.authority-card,
.silo-main a.authority-card:is(:link, :visited) {
  background: var(--panel-bg);
  border-color: var(--border);
  color: var(--text-main);
  box-shadow: var(--shadow-card);
}

.authority-tiers {
  background: var(--panel-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .pricing-card.selectable:not(.selected),
html[data-theme='light'] .pricing-card.premium.selectable:not(.selected),
html[data-theme='light'] .pricing-card.featured.selectable:not(.selected) {
  background: var(--surface-elevated);
}

html[data-theme='light'] .pricing-card.selectable.selected {
  box-shadow: var(--shadow-elevated);
}

html[data-theme='light'] #website-packages .pricing-grid--markets .pricing-card.premium.selectable {
  background: linear-gradient(160deg, #faf5ff 0%, var(--surface-elevated) 100%);
  border-color: rgba(192, 132, 252, 0.35);
}

html[data-theme='light'] .authority-card,
html[data-theme='light'] .silo-main a.authority-card:is(:link, :visited) {
  color: var(--text-main);
}

/* ── Package comparison (.pkg-cmp) ── */
.package-comparison__scroll {
  background: var(--panel-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

.package-comparison__table th,
.package-comparison__table td {
  border-color: var(--border);
}

.package-comparison__table thead th {
  background: var(--surface-band);
  color: var(--text-main);
}

.package-comparison__table td:not(.pkg-cmp-feature),
.package-comparison__table thead th:not(.pkg-cmp-feature) {
  border-color: var(--border);
  background: var(--surface);
}

.pkg-cmp-feature {
  background: var(--surface-elevated);
  box-shadow: 4px 0 8px color-mix(in srgb, var(--text-main) 8%, transparent);
}

.pkg-cmp-feature--corner {
  background: var(--surface-band);
}

.pkg-cmp-tier-icon-wrap {
  background: var(--surface-band);
  border-color: var(--border);
}

.pkg-cmp-cell--text,
.pkg-cmp-tier-name,
.pkg-cmp-tier-price {
  color: var(--text-main);
}

/* ── Buyer routes / managed-vs-diy / second-site callout ── */
.buyer-routes__card {
  background: var(--panel-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .buyer-routes__card--primary {
  background: linear-gradient(145deg, color-mix(in srgb, #6366f1 12%, var(--surface-elevated)) 0%, var(--panel-bg) 100%);
  border-color: color-mix(in srgb, #6366f1 32%, var(--border));
  box-shadow: var(--shadow-card);
}

.managed-vs-diy__col {
  background: var(--panel-bg);
  border-color: var(--border);
}

.managed-vs-diy__col--diy {
  background: var(--surface-band);
  border-color: var(--border);
}

html[data-theme='light'] .managed-vs-diy__col--diy h3 {
  color: var(--text-muted);
}

html[data-theme='light'] .managed-vs-diy__col--diy ul {
  color: var(--text-muted);
}

.managed-vs-diy__col--csmbac,
.package-info-grid .managed-vs-diy__col--csmbac,
.pd-panel .package-info-grid .managed-vs-diy__col--csmbac {
  background:
    radial-gradient(ellipse 90% 70% at 15% 0%, rgba(0, 123, 255, 0.08), transparent 55%),
    radial-gradient(ellipse 60% 50% at 95% 100%, rgba(0, 210, 255, 0.05), transparent 50%),
    var(--surface-elevated);
  border-color: color-mix(in srgb, #007bff 28%, var(--border));
  box-shadow: var(--shadow-card);
}

.second-site-callout__inner {
  background: linear-gradient(145deg, color-mix(in srgb, #6366f1 10%, var(--surface-elevated)) 0%, var(--panel-bg) 100%);
  border-color: color-mix(in srgb, #6366f1 30%, var(--border));
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .second-site-callout__eyebrow {
  color: var(--link-uk);
}

html[data-theme='light'] .second-site-callout__title-link:is(:link, :visited) {
  color: var(--text-main);
}

html[data-theme='light'] .second-site-callout__title-link:hover,
html[data-theme='light'] .second-site-callout__title-link:focus-visible {
  color: var(--link-uk);
}

.second-site-callout-panel {
  background:
    radial-gradient(ellipse 80% 70% at 0% 0%, rgba(251, 146, 60, 0.08), transparent 55%),
    var(--panel-bg);
  border-color: color-mix(in srgb, #fb923c 28%, var(--border));
}

/* ── Homepage includes panel ── */
#website-packages .homepage-includes-panel {
  background: linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, #007bff 6%, var(--surface-elevated)) 42%, var(--surface) 100%);
  border-color: color-mix(in srgb, #007bff 22%, var(--border));
  box-shadow: var(--shadow-elevated);
}

html[data-theme='light'] #website-packages .homepage-includes-panel h4 {
  color: #0369a1;
}

#website-packages .homepage-includes-panel__visual {
  border-left-color: var(--border);
}

/* ── Growth engine / multi-location / second-site education ── */
.growth-engine,
.multi-location {
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, color-mix(in srgb, #38bdf8 8%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 100%, color-mix(in srgb, #c084fc 7%, transparent), transparent 50%),
    var(--panel-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

.growth-engine h2,
.growth-engine__panel h3,
.growth-engine__examples-heading,
.growth-engine__subhead {
  color: var(--text-main);
}

.growth-engine__lead,
.growth-engine__list,
.growth-engine__flow-step p {
  color: var(--text-muted);
}

.growth-engine__flow-step strong {
  color: var(--text-main);
}

.growth-engine__flow-visual,
.growth-engine__panel,
.growth-engine__example {
  background: var(--surface-elevated);
  border-color: var(--border);
}

html[data-theme='light'] .growth-engine__eyebrow,
html[data-theme='light'] .multi-location .growth-engine__eyebrow {
  color: color-mix(in srgb, var(--accent) 72%, var(--text-main));
}

html[data-theme='light'] .ge-flow__kicker {
  color: color-mix(in srgb, #0ea5e9 70%, var(--text-muted));
}

/* ── Site carousel frames / pitch ── */
.site-carousel__stage {
  background: var(--frame-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-elevated);
}

.site-carousel__controls button {
  background: var(--surface-elevated);
  border-color: var(--border);
  color: var(--chrome-fg);
}

html[data-theme='light'] .site-carousel__pitch-stack,
html[data-theme='light'] .site-carousel__pitch-frame {
  color: var(--text-main);
}

html[data-theme='light'] .site-carousel__pitch-kicker {
  color: var(--accent);
}

.macbook-frame__camera {
  background: var(--frame-bg);
}

/* ── Example themes marquee frames / controls / lightbox ── */
.example-themes-marquee__frame {
  background: var(--frame-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

.example-themes-marquee[data-device='mobile'] .example-themes-marquee__frame {
  background: var(--frame-bg);
  border-color: color-mix(in srgb, #818cf8 22%, var(--border));
}

.example-themes-marquee__device-btn,
.example-themes-marquee__zoom-btn {
  background: var(--panel-bg);
  border-color: var(--border);
  color: var(--chrome-fg);
}

.example-themes-marquee__lightbox.is-active .example-themes-marquee__lightbox-backdrop {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}

.example-themes-marquee__lightbox-close {
  background: var(--panel-bg);
  border-color: var(--border);
  color: var(--text-main);
}

/* ── Secure checkout / hero modal / sticky contact / enquiry / brief ── */
.secure-checkout__domain-input,
.secure-checkout__agent-ref-input {
  background: var(--surface-elevated);
  border-color: var(--border);
  color: var(--text-main);
}

.checkout-progress__tick {
  background: var(--surface);
  border-color: var(--border);
}

.checkout-progress__step.is-done .checkout-progress__tick {
  background: color-mix(in srgb, #a3e635 28%, var(--surface));
}

.checkout-celebrate {
  color: var(--text-main);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-bg));
}

.secure-checkout__agent-ref,
.bank-transfer-panel,
.package-contact-routes {
  background: var(--panel-bg);
  border-color: var(--border);
}

.hero-cta-path__pill {
  background: var(--panel-bg);
  border-color: var(--border);
  color: var(--text-main);
}

.hero-cta-path.btn-primary .hero-cta-path__pill {
  background: color-mix(in srgb, var(--btn-primary-fg) 12%, transparent);
  border-color: color-mix(in srgb, var(--btn-primary-fg) 22%, transparent);
  color: var(--btn-primary-fg);
}

.hero-cta-brief__link:is(:link, :visited) {
  color: var(--text-muted);
}

.hero-cta-modal__backdrop {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}

.hero-cta-modal__shell {
  background: var(--surface-elevated);
  border-color: var(--border);
  box-shadow: var(--shadow-elevated);
}

.hero-cta-modal__close {
  color: var(--text-muted);
}

.csmbac-sticky-contact__menu {
  background: var(--panel-bg);
  border-color: var(--border);
  box-shadow: var(--shadow-elevated);
}

.csmbac-sticky-contact__option {
  background: var(--surface-band);
  border-color: var(--border);
  color: var(--text-main);
}

.csmbac-sticky-contact__option:is(:link, :visited, :hover, :active, :focus-visible) {
  color: var(--text-main);
}

.csmbac-enquiry__inner {
  background: var(--panel-bg);
  border-color: var(--border);
}

.csmbac-enquiry__field input,
.csmbac-enquiry__field textarea {
  background: var(--surface-elevated);
  border-color: var(--border);
  color: var(--text-main);
}

.website-brief-page {
  background: var(--bg);
  color: var(--text-main);
}

.website-brief h1 {
  color: var(--text-main);
}

.website-brief__intro p,
.website-brief__done p {
  color: var(--text-muted);
}

.website-brief__section {
  background: var(--panel-bg);
  border-color: var(--border);
}

/* ── Progressive disclosure ── */
html[data-theme='light'] {
  --pd-trigger-bg: rgba(15, 23, 42, 0.04);
  --pd-trigger-border: rgba(15, 23, 42, 0.14);
  --pd-rim: rgba(15, 23, 42, 0.12);
  --pd-accent-glow: color-mix(in srgb, var(--accent) 62%, transparent);
  --pd-accent-sheen: color-mix(in srgb, var(--accent) 40%, transparent);
}

html[data-theme='light'] .pd-item {
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] .pd-item:hover {
  box-shadow: var(--shadow-elevated);
}

/* ── Footer / market selector / page-order QR ── */
footer {
  background: var(--footer-bg);
  border-top-color: var(--border);
}

.footer-pill,
.footer-pill:is(:link, :visited) {
  background: var(--pill-bg);
  border-color: var(--pill-border);
  color: var(--pill-text);
}

.footer-pill:hover,
.footer-pill:focus-visible {
  background: var(--pill-hover-bg);
  border-color: var(--pill-hover-border);
}

.site-footer-exit-banner {
  background: var(--footer-bg);
  border-top-color: var(--footer-bg-top);
}

div.page-order-qr .page-order-qr__panel {
  background: var(--panel-bg);
  background-color: var(--surface-elevated);
  border-color: var(--border);
  color: var(--text-main);
  box-shadow: var(--shadow-card);
}

html[data-theme='light'] div.page-order-qr .page-order-qr__link,
html[data-theme='light'] div.page-order-qr .page-order-qr__cta-link {
  color: var(--text-main);
}

/* currency-switcher light tokens live in market-selector.css — reinforce here */
html[data-theme='light'] .currency-switcher {
  --cs-fg: rgba(15, 23, 42, 0.62);
  --cs-fg-strong: var(--text-main);
  --cs-bg: var(--pill-bg);
  --cs-border: var(--pill-border);
  --cs-shadow: var(--shadow-card);
  --cs-active-bg: var(--surface-band);
}

html[data-theme='light'] .currency-switcher__link.is-active,
html[data-theme='light'] .currency-switcher__link.is-active:is(:link, :visited) {
  color: var(--text-main);
}

/* ── Silo FAQ / peace-of-mind accordions ── */
.silo-faq {
  border-top-color: var(--border);
}

.faq-item {
  border-bottom-color: var(--border);
}

.peace-of-mind-accordion {
  border-color: var(--border);
  background: var(--panel-bg);
}

.peace-of-mind-accordion > summary {
  color: var(--text-main);
}

.peace-of-mind-body {
  color: var(--text-muted);
}

.peace-of-mind-trust li {
  background: var(--surface-band);
  border-color: var(--border);
  color: var(--text-muted);
}

/* ── HORIZONEERING / checker on light ── */
html[data-theme='light'] #checker-canvas {
  opacity: var(--hz-opacity);
}

html[data-theme='light'] .hero-concept {
  opacity: var(--hz-opacity);
}