/*
 * Tokens de diseño de AWP Base.
 *
 * Son la escala base del Design Standard (sección 4). Los roles (--color-primary, --color-text…) son estables;
 * sus valores cambian por cliente: el theme hijo los redefine en assets/css/tokens-cliente.css.
 * Un componente no usa valores sueltos: lee siempre uno de estos tokens.
 */
:root {
	/* Color por rol */
	--color-primary: #0b57d0;
	--color-primary-hover: #0847ac;
	--color-on-primary: #ffffff;
	--color-accent: #ec6b25;
	--color-page: #ffffff;
	--color-surface: #f4f7fa;
	--color-surface-strong: #081b33;
	--color-on-surface-strong: #ffffff;
	--color-text: #172033;
	--color-text-muted: #5a687d;
	--color-border: rgba(23, 32, 51, 0.12);
	--color-focus: #0b57d0;
	--color-error: #b3261e;
	--color-success: #1e6b3a;

	/*
	 * Tipografía: pila del sistema como respaldo. La fuente real la elige el equipo en AWP → Tipografía o el theme
	 * hijo (filtro awp_base_default_fonts) y se escribe aparte (inc/fonts.php). El hijo no redefine estas variables.
	 */
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: var(--font-body);
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: clamp(1.125rem, 1vw + 0.9rem, 1.25rem);
	--text-h3: clamp(1.5rem, 2vw + 1rem, 2.25rem);
	--text-h2: clamp(2rem, 3vw + 1rem, 3.5rem);
	--text-h1: clamp(2.25rem, 5vw, 4rem);
	--leading-body: 1.6;
	--leading-heading: 1.15;

	/* Espacio y forma */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4.5rem;
	--space-9: clamp(5rem, 10vw, 8rem);
	--radius-sm: 0.75rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
	--radius-pill: 9999px;
	--container-max: 75rem;
	--container-wide: 90rem;
	--shadow-card: 0 18px 45px -24px rgba(8, 27, 51, 0.22);

	/* Movimiento */
	--ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
	--duration-fast: 160ms;
	--duration-base: 260ms;
	--duration-slow: 500ms;

	/* Medidas de componentes */
	--touch-min: 2.75rem;
	--mobile-bar-height: 4rem;
	--header-gap: var(--space-4);

	/*
	 * Escala de capas (z-index). Es la única: ningún CSS usa números sueltos por encima de 2 (el 1 y el 2 solo ordenan
	 * capas dentro de un mismo componente). De abajo hacia arriba: barra móvil, burbuja, fondo oscuro del menú,
	 * cabecera (el panel del menú vive dentro de ella), ventana emergente y enlace de salto.
	 */
	--z-bar: 20;
	--z-bubble: 30;
	--z-backdrop: 40;
	--z-header: 50;
	--z-popup: 60;
	--z-skip: 70;
}