/* ==========================================================================
   DARK MODE - Tema escuro opcional
   ========================================================================== */

/* ---- Variáveis para Dark Mode ---- */
html.dark-mode {
	--ink: #f5f5f5;
	--ink-soft: #e8e8e8;
	--graphite: #d4d4d4;
	--ash: #a0a0a0;
	--ash-light: #808080;
	--silver: #606060;
	--silver-soft: #4a4a4a;
	--paper: #2a2a2a;
	--white: #1a1a1a;

	--line-color: rgba(255, 255, 255, 0.14);
	--line-color-soft: rgba(255, 255, 255, 0.08);
	--line-color-on-dark: rgba(10, 10, 10, 0.18);
	--line-color-on-dark-soft: rgba(10, 10, 10, 0.1);

	--accent: #e8c9a8;
	--accent-dark: #d4a574;
	--accent-light: #f5ede3;
	--accent-soft: #3a2f28;
}

/* ---- Transição suave para Dark Mode ---- */
html.dark-mode,
html.dark-mode * {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ---- Body em Dark Mode ---- */
html.dark-mode body {
	background: var(--paper);
	color: var(--ink);
}

/* ---- Headers em Dark Mode ---- */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
	color: var(--ink);
}

/* ---- Links em Dark Mode ---- */
html.dark-mode a {
	color: var(--accent);
}

html.dark-mode a:hover {
	color: var(--accent-light);
}

/* ---- Cards em Dark Mode ---- */
html.dark-mode .card,
html.dark-mode .card-elevated {
	background: var(--silver-soft);
	border-color: var(--line-color);
}

/* ---- Inputs em Dark Mode ---- */
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="number"],
html.dark-mode textarea,
html.dark-mode select {
	background: var(--silver-soft);
	color: var(--ink);
	border-color: var(--line-color);
}

html.dark-mode input[type="text"]:focus,
html.dark-mode input[type="email"]:focus,
html.dark-mode input[type="password"]:focus,
html.dark-mode input[type="number"]:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
	background: var(--silver);
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.2);
}

/* ---- Botões em Dark Mode ---- */
html.dark-mode .btn-secondary {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
}

html.dark-mode .btn-secondary:hover {
	background: var(--accent);
	color: var(--paper);
}

/* ---- Tabs em Dark Mode ---- */
html.dark-mode .tabs {
	border-bottom-color: var(--line-color);
}

html.dark-mode .tabs__item {
	color: var(--ash);
}

html.dark-mode .tabs__item.is-active {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* ---- Accordion em Dark Mode ---- */
html.dark-mode .accordion {
	border-color: var(--line-color);
	background: var(--silver-soft);
}

html.dark-mode .accordion__item {
	border-bottom-color: var(--line-color);
}

html.dark-mode .accordion__header {
	background: var(--silver);
	color: var(--ink);
}

html.dark-mode .accordion__header:hover {
	background: var(--silver-soft);
	color: var(--accent);
}

html.dark-mode .accordion__header.is-active {
	background: var(--accent-soft);
	color: var(--accent);
}

/* ---- Breadcrumb em Dark Mode ---- */
html.dark-mode .breadcrumb__item {
	color: var(--ash);
}

html.dark-mode .breadcrumb__item a {
	color: var(--accent);
}

html.dark-mode .breadcrumb__item a:hover {
	color: var(--accent-light);
}

html.dark-mode .breadcrumb__item.is-active {
	color: var(--ink);
}

/* ---- Tags em Dark Mode ---- */
html.dark-mode .tag {
	background: var(--accent-soft);
	color: var(--accent-light);
}

html.dark-mode .tag:hover {
	background: var(--accent);
	color: var(--paper);
}

/* ---- Badges em Dark Mode ---- */
html.dark-mode .badge-accent {
	background: var(--accent-soft);
	color: var(--accent-light);
}

/* ---- Alerts em Dark Mode ---- */
html.dark-mode .alert {
	background: rgba(0, 0, 0, 0.3);
}

html.dark-mode .alert-success {
	background: rgba(74, 157, 111, 0.15);
	border-color: #6fc97f;
	color: #6fc97f;
}

html.dark-mode .alert-warning {
	background: rgba(217, 119, 6, 0.15);
	border-color: #ffa500;
	color: #ffa500;
}

html.dark-mode .alert-error {
	background: rgba(220, 38, 38, 0.15);
	border-color: #ff6b6b;
	color: #ff6b6b;
}

html.dark-mode .alert-info {
	background: rgba(8, 145, 178, 0.15);
	border-color: #00d4ff;
	color: #00d4ff;
}

/* ---- WooCommerce em Dark Mode ---- */
html.dark-mode .woocommerce div.product {
	color: var(--ink);
}

html.dark-mode .woocommerce div.product .product_title {
	color: var(--ink);
}

html.dark-mode .woocommerce div.product p.price,
html.dark-mode .woocommerce div.product span.price {
	color: var(--accent);
}

html.dark-mode .woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--ash);
}

html.dark-mode .acdc-swatch {
	background: var(--silver-soft);
	color: var(--ink);
	border-color: var(--line-color);
}

html.dark-mode .acdc-swatch:hover {
	border-color: var(--accent);
	background: var(--silver);
}

html.dark-mode .acdc-swatch.is-selected {
	background: var(--accent);
	color: var(--paper);
	border-color: var(--accent);
}

/* ---- Header em Dark Mode ---- */
html.dark-mode .site-header {
	background: var(--silver-soft);
	border-color: var(--line-color);
}

html.dark-mode .site-header a {
	color: var(--ink);
}

html.dark-mode .site-header a:hover {
	color: var(--accent);
}

/* ---- Footer em Dark Mode ---- */
html.dark-mode .site-footer {
	background: var(--silver-soft);
	color: var(--ink);
	border-color: var(--line-color);
}

html.dark-mode .site-footer a {
	color: var(--accent);
}

html.dark-mode .site-footer a:hover {
	color: var(--accent-light);
}

/* ---- Drawers em Dark Mode ---- */
html.dark-mode .cart-drawer,
html.dark-mode .wishlist-drawer,
html.dark-mode .mobile-menu {
	background: var(--paper);
	color: var(--ink);
}

html.dark-mode .cart-drawer a,
html.dark-mode .wishlist-drawer a,
html.dark-mode .mobile-menu a {
	color: var(--accent);
}

/* ---- Quick View em Dark Mode ---- */
html.dark-mode .quick-view {
	background: var(--paper);
	color: var(--ink);
}

/* ---- Overlay em Dark Mode ---- */
html.dark-mode [data-mobile-overlay] {
	background: rgba(0, 0, 0, 0.6);
}

/* ---- Respects prefers-color-scheme ---- */
@media (prefers-color-scheme: dark) {
	html:not(.light-mode) {
		--ink: #f5f5f5;
		--ink-soft: #e8e8e8;
		--graphite: #d4d4d4;
		--ash: #a0a0a0;
		--ash-light: #808080;
		--silver: #606060;
		--silver-soft: #4a4a4a;
		--paper: #2a2a2a;
		--white: #1a1a1a;

		--line-color: rgba(255, 255, 255, 0.14);
		--line-color-soft: rgba(255, 255, 255, 0.08);

		--accent: #e8c9a8;
		--accent-dark: #d4a574;
		--accent-light: #f5ede3;
		--accent-soft: #3a2f28;
	}
}