/* ==========================================================================
   Lulu — Base: tokens, reset, tipografía y utilidades
   Todos los colores, fuentes y medidas salen de aquí.
   ========================================================================== */

:root {
	/* Color */
	--color-bg: #120a10;
	--color-surface: #1c1017;
	--color-surface-2: #261721;
	--color-border: #38232f;
	--color-text: #f6eef1;
	--color-muted: #a78e99;
	/* Marca (colores del logo de Lulu) */
	--color-primary: #c81823;        /* Rojo "Lulu": fondos (botones, badges, barra superior) */
	--color-primary-hover: #a8121c;
	--color-on-primary: #ffffff;
	--color-secondary: #e02e6d;      /* Rosa "Sexshop": iconos y detalles gráficos */
	--color-secondary-text: #f0538a; /* Rosa para texto pequeño (contraste AA sobre fondo oscuro) */
	--color-tertiary: #316bab;       /* Azul "RD": acentos puntuales */
	--color-tertiary-text: #5b8fd0;
	--color-overlay: rgb(14 7 12 / 84%);
	--color-success: #25d366;
	--color-danger: #ef5b5b;

	/* Tipografía */
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-serif: "Playfair Display", Georgia, serif;
	--fs-2xs: 0.625rem;   /* 10px */
	--fs-xs: 0.6875rem;   /* 11px */
	--fs-sm: 0.8125rem;   /* 13px */
	--fs-base: 0.9375rem; /* 15px */
	--fs-md: 1.0625rem;   /* 17px */
	--fs-lg: 1.25rem;     /* 20px */
	--fs-xl: clamp(1.625rem, 2.6vw, 2.125rem);
	--fs-2xl: clamp(1.75rem, 3.2vw, 2.5rem);
	--fs-hero: clamp(2.5rem, 5.2vw, 4.125rem);
	--tracking-caps: 0.14em;

	/* Espaciado */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 36px;
	--space-7: 56px;
	--space-8: clamp(56px, 7vw, 88px);

	/* Layout */
	--container: 1200px;
	--gutter: clamp(16px, 4vw, 40px);
	--radius-sm: 2px;
	--radius: 3px;
	--transition: 0.2s ease;
}

/* Secciones claras: redefinen los tokens y todos los componentes se adaptan. */
.tone-light {
	--color-bg: #f7f1ec;
	--color-surface: #ffffff;
	--color-surface-2: #efe6e0;
	--color-border: #e2d6cf;
	--color-text: #1a0f16;
	--color-muted: #5b4a53;
	--color-secondary-text: #c81823;
	--color-tertiary-text: #316bab;
	background: var(--color-bg);
	color: var(--color-text);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 var(--space-4); }
h1, h2, h3, h4, h5 { font-family: var(--font-serif); font-weight: 400; line-height: 1.15; margin: 0 0 var(--space-4); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
::selection { background: var(--color-primary); color: var(--color-on-primary); }

/* Contenido editorial (páginas, entradas) */
.entry-content > * + * { margin-top: var(--space-4); }
/* Solo enlaces dentro de texto corrido (no tarjetas, botones ni tablas de WooCommerce). */
.entry-content :is(p, li, blockquote) > a { color: var(--color-secondary-text); text-decoration: underline; }
.entry-content h2 { font-size: var(--fs-xl); margin-top: var(--space-6); }
.entry-content h3 { font-size: var(--fs-lg); margin-top: var(--space-5); }

/* Utilidades */
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 1000;
	top: var(--space-2); left: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--color-bg);
}
.icon { flex-shrink: 0; }
.empty-state { color: var(--color-muted); padding-block: var(--space-6); text-align: center; }

.site-main { padding-block: var(--space-7); min-height: 60vh; }
.site-main--flush { padding-block: 0; }
.page-title { font-size: var(--fs-2xl); }

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