/*
 * Yokai Club — estilos globales v0.2.0 (Etapa 1)
 * La mayor parte del diseno se configura en el Personalizador de Blocksy.
 * Este archivo solo cubre lo que el Personalizador no resuelve:
 * tokens de marca, foco visible, estados, etiquetas y movimiento reducido.
 * Las secciones de tienda, ficha de producto y checkout se anadiran en etapas posteriores.
 */

/* 1. Tokens de marca ------------------------------------------------ */
:root {
	--yk-purple: #8F2FFF;
	--yk-white: #FDFFFB;
	--yk-gray: #282828;
	--yk-black: #000000;
	--yk-text-2: #B1B3B0;                    /* blanco calido atenuado, derivado */
	--yk-line: rgba(253, 255, 251, 0.14);    /* bordes sutiles */
	--yk-line-strong: rgba(253, 255, 251, 0.32);
	--yk-radius: 4px;
	--yk-space-1: 8px;
	--yk-space-2: 16px;
	--yk-space-3: 24px;
	--yk-space-4: 32px;
	--yk-space-5: 48px;
	--yk-space-6: 80px;
}

/* 2. Seleccion de texto -------------------------------------------- */
::selection {
	background: var(--yk-purple);
	color: var(--yk-white);
}

/* 3. Foco visible (teclado) ----------------------------------------
 * Doble anillo: blanco calido + negro exterior, visible sobre fondos oscuros y claros. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--yk-white);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--yk-black);
}

/* 4. Enlaces dentro del contenido ----------------------------------
 * El morado no tiene contraste suficiente como color de texto sobre fondos oscuros,
 * asi que se usa como subrayado y no como color del enlace.
 * :where() deja esta regla con especificidad minima para que los componentes la puedan sobrescribir. */
.entry-content a:where(:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.ct-button)) {
	text-decoration-line: underline;
	text-decoration-color: var(--yk-purple);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.entry-content a:where(:not(.wp-element-button):not(.wp-block-button__link):not(.button):not(.ct-button)):hover {
	text-decoration-color: var(--yk-white);
}

/* 5. Etiqueta de oferta (WooCommerce) ------------------------------- */
.woocommerce span.onsale,
span.onsale {
	background: var(--yk-purple);
	color: var(--yk-white);
	border-radius: var(--yk-radius);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	padding: 6px 10px;
	text-transform: uppercase;
}

/* 6. Estado deshabilitado ------------------------------------------- */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.button.disabled,
.single_add_to_cart_button.disabled,
.wp-element-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.4;
}

/* 7. Movimiento reducido -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}