/*
Theme Name: Catálogo EWF
Theme URI: https://lekodesign.com.br
Description: Tema sob medida de alta performance para o Catálogo de Produtos EWF. Otimizado para SEO, sem dependência de plugins pesados e com painel administrativo simplificado (White Label).
Version: 1.0.0
Author: EWF & Antigravity AI
Author URI: https://lekodesign.com.br
Text Domain: ewf-catalogo
*/

@font-face {
	font-family: "Nexa EWF";
	src: url("assets/fonts/nexa/nexa-light-webfont.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Nexa EWF";
	src: url("assets/fonts/nexa/nexa-bold-webfont.woff2") format("woff2");
	font-weight: 600 800;
	font-style: normal;
	font-display: swap;
}

/* --- Variaveis de Cores para o Front-end --- */
:root {
	--font-primary: "Nexa EWF", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--bg-primary: #ffffff;
	--text-primary: #1d1d1f;
	--text-secondary: #515154;
	--link-color: #3c627e;
	--accent-color: #bc7e6f;
}

html.dark-theme {
	--bg-primary: #0c1115;
	--text-primary: #f5f5f7;
	--text-secondary: #a1a1a6;
	--link-color: #7fa3bc;
	--accent-color: #da9987;
}

/* --- Estilos Globais do Front-end --- */
html, body {
	background-color: var(--bg-primary) !important;
	color: var(--text-primary) !important;
	font-family: var(--font-primary) !important;
	transition: background-color 0.3s ease, color 0.3s ease;
}

button,
input,
select,
textarea,
.elementor-widget,
.elementor-widget-container {
	font-family: var(--font-primary) !important;
}

/* Forçar fundos escuros e textos claros no editor/site no modo escuro */
html.dark-theme body.elementor-editor-active,
html.dark-theme .elementor-editor-active #elementor-preview-responsive-wrapper {
	background-color: var(--bg-primary) !important;
}

html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6,
html.dark-theme p,
html.dark-theme span,
html.dark-theme a,
html.dark-theme li {
	color: var(--text-primary);
}

html.dark-theme a {
	color: var(--link-color);
}

html.dark-theme a:hover {
	color: var(--text-primary);
}

/* Seções e containers do Elementor no Modo Escuro */
html.dark-theme .elementor-section,
html.dark-theme .elementor-top-section,
html.dark-theme .elementor-section-wrap {
	background-color: var(--bg-primary) !important;
	background-image: none !important;
}

html.dark-theme .elementor-column,
html.dark-theme .elementor-column-wrap,
html.dark-theme .elementor-widget-wrap,
html.dark-theme .elementor-widget-container {
	background-color: transparent !important;
	background: transparent !important;
}

/* Forçar cores de texto claras em todos os títulos, textos e widgets do Elementor */
html.dark-theme .elementor-heading-title,
html.dark-theme .elementor-text-editor,
html.dark-theme .elementor-text-editor *,
html.dark-theme .elementor-widget-container *,
html.dark-theme .elementor-icon-box-title,
html.dark-theme .elementor-icon-box-description,
html.dark-theme .elementor-image-box-title,
html.dark-theme .elementor-image-box-description {
	color: var(--text-primary) !important;
}

/* Forçar fundos de cartões e caixas do Elementor a ficarem escuros */
html.dark-theme .elementor-widget-icon-box,
html.dark-theme .elementor-widget-image-box,
html.dark-theme .elementor-price-table,
html.dark-theme .elementor-card {
	background-color: var(--card-solid-bg) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
}