/**
 * CIRCULOVIVO — base.
 *
 * Alias semánticos de tokens, tipografía base, foco, skip link,
 * reduced motion y utilidades a11y. Los valores fuente viven en theme.json
 * (--wp--preset--*); aquí solo se crean alias estables --cv-* para CSS propio.
 */

:root {
	/* Superficies */
	--cv-surface: var(--wp--preset--color--surface);
	--cv-surface-raised: var(--wp--preset--color--surface-raised);
	--cv-surface-tint: var(--wp--preset--color--surface-tint);
	--cv-surface-inverse: var(--wp--preset--color--surface-inverse);
	--cv-surface-inverse-raised: var(--wp--preset--color--surface-inverse-raised);

	/* Texto */
	--cv-text: var(--wp--preset--color--text);
	--cv-text-muted: var(--wp--preset--color--text-muted);
	--cv-text-inverse: var(--wp--preset--color--text-inverse);
	--cv-text-inverse-muted: var(--wp--preset--color--text-inverse-muted);

	/* Bordes y señales */
	--cv-border: var(--wp--preset--color--border);
	--cv-border-inverse: var(--wp--preset--color--border-inverse);
	--cv-signal: var(--wp--preset--color--signal);
	--cv-signal-soft: var(--wp--preset--color--signal-soft);
	--cv-accent: var(--wp--preset--color--accent);
	--cv-success: var(--wp--preset--color--success);
	--cv-warning: var(--wp--preset--color--warning);
	--cv-error: var(--wp--preset--color--error);

	/* Foco: visible sobre claro y oscuro */
	--cv-focus-ring: 2px solid var(--cv-signal);
	--cv-focus-offset: 2px;

	/* Geometría */
	--cv-radius-s: var(--wp--custom--radius--s, 4px);
	--cv-radius-m: var(--wp--custom--radius--m, 8px);
	--cv-radius-l: var(--wp--custom--radius--l, 14px);

	/* Motion */
	--cv-duration-fast: var(--wp--custom--motion--duration--fast, 150ms);
	--cv-duration: var(--wp--custom--motion--duration--base, 240ms);
	--cv-duration-slow: var(--wp--custom--motion--duration--slow, 420ms);
	--cv-ease: var(--wp--custom--motion--easing, cubic-bezier(0.33, 1, 0.68, 1));

	/* Capas */
	--cv-z-header: var(--wp--custom--z-index--header, 40);
	--cv-z-overlay: var(--wp--custom--z-index--overlay, 50);
	--cv-z-skip: var(--wp--custom--z-index--skip-link, 100);

	/* Sombra glass sutil (énfasis, no superficie por defecto) */
	--cv-shadow-panel: 0 1px 2px rgba(20, 27, 35, 0.05), 0 8px 24px -12px rgba(20, 27, 35, 0.18);
	--cv-shadow-glass: 0 1px 0 rgba(253, 252, 250, 0.6) inset, 0 12px 32px -16px rgba(20, 27, 35, 0.22);

	/* Ancho de lectura */
	--cv-prose: var(--wp--custom--max-width--prose, 68ch);

	accent-color: var(--cv-signal);
	color-scheme: light;
}

/* Tipografía base y render */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip; /* red de seguridad contra overflow horizontal */
}

/* Palabras y URLs largas nunca rompen el layout */
p,
li,
dd,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
a {
	overflow-wrap: break-word;
}

/* Media fluida por defecto */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* ---------- Foco visible ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--cv-focus-ring);
	outline-offset: var(--cv-focus-offset);
	border-radius: var(--cv-radius-s);
}

/* ---------- Skip link ---------- */
.cv-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--cv-z-skip);
	padding: 0.75rem 1.25rem;
	background: var(--cv-surface-inverse);
	color: var(--cv-text-inverse);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--cv-radius-m) 0;
}

.cv-skip-link:focus {
	left: 0;
}

/* ---------- Solo lectores de pantalla ---------- */
.screen-reader-text,
.cv-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Enlaces ---------- */
a {
	text-underline-offset: 0.18em;
	transition: color var(--cv-duration-fast) var(--cv-ease);
}

/* ---------- Selección ---------- */
::selection {
	background: var(--cv-signal-soft);
	color: var(--cv-surface-inverse);
}

/* ---------- Targets táctiles mínimos ---------- */
button,
.wp-block-button__link,
input[type="submit"] {
	min-height: 44px;
}

/* ---------- Reduced motion: apagar todo lo no esencial ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}