/* Shared theme layer — loaded after product theme.css */

body.theme-canvas-light,
body.theme-canvas-dark {
    --theme-on-surface: var(--theme-ink, var(--theme-primary));
    --theme-on-surface-muted: var(--color-muted);
    --theme-surface-border: var(--color-border);
}

body.theme-shell-light {
    background: var(--theme-page-bg, #f8fafc);
    color: var(--theme-ink, var(--color-text, #0f172a));
    font-family: var(--font-sans, system-ui, sans-serif);
}

body.theme-shell-light .topbar {
    background: var(--theme-topbar-bg, var(--theme-primary-dark));
    color: rgba(248, 250, 252, 0.9);
}

body.theme-shell-light .topbar a {
    color: var(--theme-accent-light);
}

body.theme-shell-light .site-header {
    background: var(--theme-header-bg, #fff);
    border-bottom: 2px solid var(--theme-accent);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

body.theme-shell-light .brand-text,
body.theme-shell-light .main-nav a {
    color: var(--theme-header-nav-color, var(--theme-ink));
}

body.theme-shell-light .main-nav a:hover,
body.theme-shell-light .main-nav a.is-active {
    background: transparent;
    color: var(--theme-header-nav-color, var(--theme-ink));
    border-bottom-color: var(--theme-accent);
}

body.theme-shell-light .header-phone {
    color: var(--theme-header-nav-color, var(--theme-ink));
}

body.theme-shell-light .btn-primary:not(.cta-band .btn-primary):not(.page-cta .btn-primary),
body.theme-shell-light .header-cta.btn-primary {
    background: var(--theme-accent-button, var(--theme-accent));
    color: var(--theme-on-accent, var(--theme-on-primary, #fff));
    font-weight: 700;
}

body.theme-shell-light .btn-primary:not(.cta-band .btn-primary):not(.page-cta .btn-primary) .icon,
body.theme-shell-light .header-cta.btn-primary .icon,
body.theme-shell-light .btn-primary:not(.cta-band .btn-primary):not(.page-cta .btn-primary) svg,
body.theme-shell-light .header-cta.btn-primary svg {
    color: inherit;
}

body.theme-shell-light .btn-primary:not(.cta-band .btn-primary):not(.page-cta .btn-primary):hover,
body.theme-shell-light .header-cta.btn-primary:hover {
    filter: brightness(1.06);
}

body.theme-shell-light .btn-secondary {
    border-color: var(--theme-accent);
    color: var(--theme-ink);
    background: var(--theme-surface);
}

body.theme-shell-light .eyebrow {
    color: var(--theme-accent);
}

body.theme-shell-light .site-footer {
    background: var(--theme-primary-dark);
    color: var(--theme-on-primary-dark, #e2e8f0);
}

body.theme-shell-light .cta-band {
    background: var(--theme-primary);
    color: var(--theme-on-primary, #fff);
}

body.theme-shell-light .cta-band .btn-primary,
body.theme-shell-light .page-cta .btn-primary,
body.theme-shell-light .about-page-cta .btn-primary {
    background: var(--theme-accent-button, var(--theme-accent));
    color: var(--theme-on-accent, var(--theme-on-primary, #fff));
    border-color: transparent;
}

body.theme-shell-light .content-card,
body.theme-shell-light .contact-card,
body.theme-shell-light .contact-form-card,
body.theme-shell-light .map-card {
    background: var(--theme-surface);
    border-color: var(--theme-surface-border);
}

body.theme-shell-light .contact-form-title {
    color: var(--theme-ink);
}

body.theme-shell-light .page-cta {
    background: var(--theme-primary);
}

body.theme-shell-light .catalog-filters .btn.is-active {
    background: var(--theme-accent-button, var(--theme-accent));
    color: var(--theme-on-primary, #fff);
}

body.theme-shell-light .service-card:hover {
    border-color: color-mix(in srgb, var(--theme-accent) 40%, var(--color-border, #e2e8f0));
}

.btn.btn-ghost,
.btn.btn-whatsapp,
.contact-form-wa,
.mobile-wa.btn-whatsapp {
    background: transparent;
    color: var(--theme-ink);
    border: 1px solid var(--theme-surface-border, var(--color-border));
}

.btn.btn-whatsapp:hover,
.btn.btn-ghost:hover,
.contact-form-wa:hover {
    background: color-mix(in srgb, var(--theme-accent) 8%, var(--theme-surface));
    color: var(--theme-ink);
}

body :is(.hero-photo, .cta-band, .page-cta, .about-page-cta) :is(.btn-whatsapp, .btn-ghost, .btn-secondary, .btn-outline) {
    background: transparent;
    border-color: color-mix(in srgb, var(--theme-on-primary, #fff) 55%, transparent);
    color: var(--theme-on-primary, #fff);
}

body :is(.hero-photo, .cta-band, .page-cta, .about-page-cta) :is(.btn-whatsapp, .btn-ghost, .btn-secondary, .btn-outline):hover {
    background: color-mix(in srgb, var(--theme-on-primary, #fff) 12%, transparent);
    border-color: var(--theme-on-primary, #fff);
    color: var(--theme-on-primary, #fff);
}

html body[class*="sector-"].theme-shell-light .cta-band .btn.btn-primary,
html body[class*="sector-"].theme-shell-light .page-cta .btn.btn-primary,
html body[class*="sector-"].theme-shell-light .about-page-cta .btn.btn-primary {
    background: var(--theme-accent-button, var(--theme-accent));
    color: var(--theme-on-accent, var(--theme-on-primary, #fff));
    border-color: transparent;
}

html body[class*="sector-"] a.floating-wa,
a.floating-wa {
    background: var(--theme-accent-button, var(--theme-accent));
    color: var(--theme-on-accent, var(--theme-on-primary, #fff));
    border: 0;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-accent-button, var(--theme-accent)) 42%, transparent);
}

html body[class*="sector-"] a.floating-wa:hover,
a.floating-wa:hover {
    background: var(--theme-accent-button, var(--theme-accent));
    color: var(--theme-on-accent, var(--theme-on-primary, #fff));
    filter: brightness(1.06);
}

a.floating-wa .icon,
a.floating-wa .icon svg {
    display: inline-flex;
    color: inherit;
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-accent, var(--theme-primary, #c2410c))
        color-mix(in srgb, var(--theme-primary, #334155) 12%, var(--theme-page-bg, var(--color-bg, #f8fafc)));
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-accent, var(--theme-primary, #c2410c))
        color-mix(in srgb, var(--theme-primary, #334155) 12%, var(--theme-page-bg, var(--color-bg, #f8fafc)));
}

html::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

html::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--theme-primary, #334155) 10%, var(--theme-page-bg, var(--color-bg, #f8fafc)));
}

html::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--theme-accent-light, var(--theme-accent, #fb923c)),
        var(--theme-accent, var(--theme-primary, #c2410c))
    );
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--theme-primary, #334155) 10%, var(--theme-page-bg, var(--color-bg, #f8fafc)));
    background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: var(--theme-accent, var(--theme-primary, #c2410c));
}

html::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    background: transparent;
}

html body[class*="sector-"] .hero-photo :is(h1, h2, .hero-title) {
    color: #fff;
}

html body[class*="sector-"] .hero-photo .hero-lead {
    color: rgba(255, 255, 255, 0.9);
}

html body[class*="sector-"] .hero-photo .hero-badge {
    color: #fff;
}

html body[class*="sector-"] :is(.page-open.is-ink, .about-open, .cta-band, .page-cta, .about-page-cta, .trust-bar, .header-utility, .section-ink, .projects-band.is-completed)
    :is(h1, h2, h3, .hero-title) {
    color: var(--theme-on-primary, #fff);
}

html body[class*="sector-"] :is(.page-open.is-ink, .about-open)
    :is(.about-open-lead, .about-open-crumb, .about-open-crumb a) {
    color: var(--theme-on-ink-muted, var(--theme-on-primary-dark, #fff));
}

html body[class*="sector-"] .page-cta {
    color: var(--theme-on-primary, #fff);
}

html body[class*="sector-"] .site-footer :is(a, strong) {
    color: var(--theme-on-primary-dark, var(--theme-on-primary, #fff));
}

html body[class*="sector-"] .site-footer :is(h4, p) {
    color: var(--theme-on-ink-muted, var(--theme-on-primary-dark, #fff));
}

html body[class*="sector-"] .site-footer .footer-wa {
    color: var(--theme-on-primary, #fff);
    border-color: rgba(255, 255, 255, 0.35);
}

html body[class*="sector-"] .site-footer .footer-wa:hover {
    color: var(--theme-on-primary, #fff);
    background: rgba(255, 255, 255, 0.1);
}

html body .site-header {
    z-index: 240;
}