/* Theme surfaces are intentionally layered over the existing component styles. */
:root {
	color-scheme: dark;
	--header-bg: rgba(13, 14, 16, .96);
	--image-bg: #f7f7f5;
	--art-mark: #303237;
	--grid-line: rgba(245, 244, 241, .08);
}

html[data-theme="dark"] {
	--black: #0d0e10;
	--dark: #181a1d;
	--panel: #202226;
	--white: #f5f4f1;
	--muted: #b1b0ac;
	--silver: #cfcec9;
	--line: rgba(245, 244, 241, .15);
	--header-bg: rgba(13, 14, 16, .96);
	--image-bg: #f7f7f5;
	--art-mark: #303237;
	--grid-line: rgba(245, 244, 241, .08);
}

html[data-theme="light"] {
	color-scheme: light;
	--black: #f7f7f5;
	--dark: #efefea;
	--panel: #fff;
	--white: #111;
	--muted: #555;
	--silver: #4a4a4a;
	--line: #dcdcdc;
	--header-bg: rgba(247, 247, 245, .96);
	--image-bg: #fff;
	--art-mark: #e5e5e0;
	--grid-line: rgba(17, 17, 17, .05);
}

html { background: var(--black); }
body, .intro, .process, .products-section, .quality-strip, .best-section, .gallery-preview, .inner-hero, .product-info, .related, .footer-cta, .site-footer, .product-card, .process-art, .quote-form, .main-product-image, .thumbs button { transition: background-color .22s ease, color .22s ease, border-color .22s ease; }
.site-header.is-scrolled { background: var(--header-bg); }
.hero, .products-section, .quality-strip, .gallery-preview, .inner-hero, .related { background: var(--black); }
.intro, .process, .best-section, .product-info, .footer-cta { background: var(--dark); }
.product-card, .process-art, .quote-form, .site-footer { background: var(--panel); }
.product-image, .main-product-image, .thumbs button, .gallery-panel, .quality-symbol { background: var(--image-bg); }
.hero-grid { background: linear-gradient(115deg, transparent 51%, var(--grid-line) 51.1%, transparent 51.3%), linear-gradient(0deg, transparent 80%, var(--grid-line) 80.1%, transparent 80.4%); }
.hero-mark { -webkit-text-stroke: 1px var(--grid-line); }
.process-art span { color: var(--art-mark); }
.quote-form input, .quote-form textarea { background: var(--black); color: var(--white); }
.quote-form input::placeholder, .quote-form textarea::placeholder { color: var(--muted); opacity: 1; }
.product-dropdown { background: var(--panel); border-color: var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .24); }
.product-dropdown a:hover { background: var(--dark); color: var(--white); }
.footer-bottom { color: var(--muted); }
.mobile-menu { background: var(--black); }
.menu-toggle i { background: var(--white); }
.menu-close, .mobile-products-toggle { color: var(--white); }

.theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; position: relative; flex: 0 0 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; transition: background-color .22s ease, border-color .22s ease, color .22s ease; }
.theme-toggle:hover { border-color: var(--red); color: var(--red); }
.theme-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.theme-icon { position: absolute; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity .18s ease, transform .18s ease; }
.theme-icon-moon { opacity: 0; transform: scale(.7) rotate(-20deg); }
html[data-theme="light"] .theme-icon-sun { opacity: 0; transform: scale(.7) rotate(20deg); }
html[data-theme="light"] .theme-icon-moon { opacity: 1; transform: scale(1) rotate(0); }

@media (max-width: 850px) {
	.theme-toggle:not(.mobile-theme-toggle) { display: none; }
	.mobile-theme-toggle { width: 100%; height: auto; min-height: 48px; margin: 14px 0 6px; padding: 10px 0; display: flex; justify-content: flex-start; gap: 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; font: 800 .7rem/1 Manrope, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
	.mobile-theme-toggle .theme-icon { position: relative; width: 18px; height: 18px; }
	.mobile-theme-toggle span { margin-left: 22px; }
}

@media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-icon { transition: none; } }