/*
Theme Name:   Otulina Child
Theme URI:    https://otulina.baby/
Description:  Motyw potomny Hello Elementor dla sklepu Otulina.baby. Tokeny design systemu, style bloków WooCommerce (koszyk, kasa, konto).
Author:       Otulina
Template:     hello-elementor
Version:      0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain:  otulina-child
License:      GPL-2.0-or-later
*/

/*
 * Tokeny są zdefiniowane w Elementorze jako zmienne globalne V4 (np. --color-thread).
 * Poniżej wartości zapasowe, aby strony bez Elementora (koszyk, kasa, konto WooCommerce)
 * korzystały z tych samych kolorów i fontów.
 */
:root {
	--otu-milk: var(--color-milk, #fbf8f4);
	--otu-linen: var(--color-linen, #f2ebe1);
	--otu-sand: var(--color-sand, #ded2c3);
	--otu-peach: var(--color-peach, #eaa87a);
	--otu-thread: var(--color-thread, #3e5a4c);
	--otu-thread-dark: var(--color-thread-dark, #2f4639);
	--otu-cocoa: var(--color-cocoa, #3a2e2b);
	--otu-muted: var(--color-muted, #6f635c);
	--otu-error: var(--color-error, #a3302a);
	--otu-radius: 2px;
	--otu-font-display: "Fraunces", Georgia, serif;
	--otu-font-body: "Jost", "Segoe UI", system-ui, sans-serif;
}

body {
	background-color: var(--otu-milk);
	color: var(--otu-cocoa);
	font-family: var(--otu-font-body);
}

:focus-visible {
	outline: 2px solid var(--otu-cocoa);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* Przyciski WooCommerce (klasyczne i blokowe) w stylu klasy .btn */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button:not(.is-link) {
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--otu-thread);
	border-radius: var(--otu-radius);
	background-color: var(--otu-thread);
	color: #fff;
	font-family: var(--otu-font-body);
	font-weight: 500;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-block-components-button:not(.is-link):hover {
	border-color: var(--otu-thread-dark);
	background-color: var(--otu-thread-dark);
	color: #fff;
}

/* Komunikaty WooCommerce */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-left: 4px solid var(--otu-thread);
	border-radius: 0;
	background: #fff;
	color: var(--otu-cocoa);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-left-color: var(--otu-error);
}