/**
 * Tema claro/escuro da Aromatto.
 * O tema claro e o padrão. A escolha fica salva no navegador.
 */

:root,
html[data-aromatto-theme="light"] {
	color-scheme: light;
	--aromatto-page: #fafbfc;
	--aromatto-surface: #ffffff;
	--aromatto-surface-strong: #ffffff;
	--aromatto-surface-soft: #f5f6f7;
	--aromatto-text: #111111;
	--aromatto-heading: #0d0d0d;
	--aromatto-muted: #6b6b6b;
	--aromatto-border: #e5e5e5;
	--aromatto-border-strong: #cfcfcf;
	--aromatto-brand: #c9a227;
	--aromatto-brand-strong: #b88f1f;
	--aromatto-brand-soft: #fff6d9;
	--aromatto-on-brand: #17120a;
	--aromatto-brand-glow: rgba(201, 162, 39, 0.18);
	--aromatto-whatsapp: #25d366;
	--aromatto-whatsapp-hover: #1fb85a;
	--aromatto-whatsapp-shadow: rgba(37, 211, 102, 0.22);
	--aromatto-accent-glow: rgba(230, 196, 90, 0.13);
	--aromatto-header-bg: rgba(255, 255, 255, 0.97);
	--aromatto-header-text: #111111;
	--aromatto-header-muted: #6b6b6b;
	--aromatto-icon-bg: #ffffff;
	--aromatto-icon-hover: #fffaf0;
	--aromatto-shadow: rgba(13, 13, 13, 0.08);
	--aromatto-card-shadow: 0 14px 35px rgba(13, 13, 13, 0.06);
	--aromatto-card-shadow-hover: 0 22px 50px rgba(13, 13, 13, 0.11);
	--aromatto-hero-shadow: 0 30px 80px rgba(13, 13, 13, 0.13);
	--aromatto-motion-fast: 260ms;
	--aromatto-motion-base: 340ms;
	--aromatto-motion-slow: 520ms;
	--aromatto-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--aromatto-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-aromatto-theme="dark"] {
	color-scheme: dark;
	--aromatto-page: #090a0b;
	--aromatto-surface: #111317;
	--aromatto-surface-strong: #191c21;
	--aromatto-surface-soft: #0f1114;
	--aromatto-text: #f5f0e6;
	--aromatto-heading: #fffaf0;
	--aromatto-muted: #a8a39a;
	--aromatto-border: #2a2d32;
	--aromatto-border-strong: #47433a;
	--aromatto-brand: #d4af57;
	--aromatto-brand-strong: #e6c56f;
	--aromatto-brand-soft: #2a2417;
	--aromatto-on-brand: #0c0d0e;
	--aromatto-brand-glow: rgba(212, 175, 87, 0.20);
	--aromatto-whatsapp: #25d366;
	--aromatto-whatsapp-hover: #2ee173;
	--aromatto-whatsapp-shadow: rgba(37, 211, 102, 0.24);
	--aromatto-accent-glow: rgba(231, 197, 111, 0.12);
	--aromatto-header-bg: rgba(9, 10, 11, 0.98);
	--aromatto-header-text: #f5f0e6;
	--aromatto-header-muted: #a8a39a;
	--aromatto-icon-bg: #111317;
	--aromatto-icon-hover: #191c21;
	--aromatto-shadow: rgba(0, 0, 0, 0.30);
	--aromatto-card-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
	--aromatto-card-shadow-hover: 0 26px 64px rgba(0, 0, 0, 0.46);
	--aromatto-hero-shadow: 0 38px 96px rgba(0, 0, 0, 0.50);

	--theme-text-color: #f5f0e6;
	--theme-headings-color: #fffaf0;
	--theme-heading-1-color: #fffaf0;
	--theme-heading-2-color: #fffaf0;
	--theme-heading-3-color: #fffaf0;
	--theme-heading-4-color: #fffaf0;
	--theme-heading-5-color: #fffaf0;
	--theme-heading-6-color: #fffaf0;
	--theme-link-initial-color: #d4af57;
	--theme-link-hover-color: #e6c56f;
	--theme-border-color: #2a2d32;
	--theme-form-text-initial-color: #f5f0e6;
	--theme-form-field-border-initial-color: #34383f;
	--theme-form-field-border-focus-color: #d4af57;
	--theme-form-field-background-initial-color: #111317;
	--theme-form-field-background-focus-color: #191c21;

	--theme-palette-color-1: #d4af57;
	--theme-palette-color-2: #e6c56f;
	--theme-palette-color-3: #f5f0e6;
	--theme-palette-color-4: #fffaf0;
	--theme-palette-color-5: #2a2d32;
	--theme-palette-color-6: #191c21;
	--theme-palette-color-7: #111317;
	--theme-palette-color-8: #090a0b;
}

html,
body,
#main,
.site-main,
[data-prefix="single_page"] .site-main,
[data-prefix="blog"] .site-main {
	background-color: var(--aromatto-page);
}

body {
	color: var(--aromatto-text);
	transition: color var(--aromatto-motion-fast) var(--aromatto-ease-standard), background-color var(--aromatto-motion-fast) var(--aromatto-ease-standard);
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.page-title {
	color: var(--aromatto-heading);
}

p,
li,
figcaption,
.wp-block-paragraph {
	color: inherit;
}

#footer,
.ct-footer,
footer[data-footer*="type"] {
	color: var(--aromatto-text);
	background: var(--aromatto-surface-soft);
	border-color: var(--aromatto-border);
}

/* Superfícies comuns que aparecem no catálogo e nos blocos do WordPress. */
.wp-block-group.has-background,
.wp-block-cover__inner-container,
.woocommerce div.product,
.woocommerce-page div.product {
	transition: color var(--aromatto-motion-fast) var(--aromatto-ease-standard), background-color var(--aromatto-motion-fast) var(--aromatto-ease-standard), border-color var(--aromatto-motion-fast) var(--aromatto-ease-standard);
}

/* Botão de alternância de tema. */
.aromatto-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--aromatto-border);
	border-radius: 50%;
	color: var(--aromatto-header-text);
	background: var(--aromatto-icon-bg);
	cursor: pointer;
	transition: color var(--aromatto-motion-base) var(--aromatto-ease-standard), border-color var(--aromatto-motion-base) var(--aromatto-ease-standard), background-color var(--aromatto-motion-base) var(--aromatto-ease-standard), transform var(--aromatto-motion-base) var(--aromatto-ease-out);
}

.aromatto-theme-toggle:hover {
	color: #c9a227;
	border-color: rgba(201, 162, 39, 0.72);
	background: var(--aromatto-icon-hover);
	transform: translateY(-1px);
}

.aromatto-theme-toggle svg {
	display: block;
	width: 19px;
	height: 19px;
}

.aromatto-theme-toggle .aromatto-icon-sun,
html[data-aromatto-theme="dark"] .aromatto-theme-toggle .aromatto-icon-moon {
	display: none;
}

html[data-aromatto-theme="dark"] .aromatto-theme-toggle .aromatto-icon-sun {
	display: block;
}

@media (max-width: 1024px) {
	.aromatto-theme-toggle--desktop {
		display: none !important;
	}

	.aromatto-mobile-actions .aromatto-theme-toggle {
		width: 42px;
		height: 42px;
	}
}

@media (max-width: 520px) {
	.aromatto-mobile-actions .aromatto-theme-toggle {
		width: 39px;
		height: 39px;
	}
}

@media (max-width: 390px) {
	.aromatto-mobile-actions .aromatto-theme-toggle {
		width: 37px;
		height: 37px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body,
	.aromatto-theme-toggle {
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================
 * Layout global da Aromatto
 * Mantem footer e secoes internas alinhados em qualquer pagina.
 * ========================================================== */
.aromatto-container {
	width: min(calc(100% - 40px), 1180px);
	margin-inline: auto;
}

@media (max-width: 690px) {
	.aromatto-container {
		width: min(calc(100% - 28px), 1180px);
	}
}

@media (max-width: 430px) {
	.aromatto-container {
		width: min(calc(100% - 22px), 1180px);
	}
}