/*
 * Tokens de diseño de Pro Profile SaaS.
 *
 * Una auditoría del plugin encontró 1,2 MB de CSS repartidos en 35 archivos y
 * 439 clases aplicadas por JavaScript que ningún estilo definía. La causa es
 * que cada pantalla decidió por su cuenta color, radio, sombra y espaciado.
 *
 * Este archivo es la única fuente de esas decisiones. Las pantallas nuevas
 * (tarjeta de compartir, dashboard, editor, micrositio) sólo consumen var().
 * Las viejas se pueden ir migrando sin prisa: mientras no usen estas
 * variables, nada cambia para ellas.
 *
 * Prefijo --ppsa- para no chocar con las variables del tema de WordPress.
 */

:root {
	/* ── Escala de grises, con un punto de verde para que no sea gris de sistema ── */
	--ppsa-bg: #f4f5f3;
	--ppsa-surface: #ffffff;
	--ppsa-surface-2: #f8f9f7;
	--ppsa-line: #e3e6e2;
	--ppsa-line-strong: #d0d4cd;
	--ppsa-ink: #171a17;
	--ppsa-ink-2: #565c56;
	--ppsa-ink-3: #868c85;

	/* ── Marca. --ppsa-brand lo pisa el perfil con su color elegido ── */
	--ppsa-brand: #2f6b55;
	--ppsa-brand-ink: #ffffff;
	--ppsa-brand-soft: #e8f1ec;

	/* ── Semánticos: separados de la marca a propósito, para que un perfil
	     con marca roja no haga que todo parezca un error ── */
	--ppsa-ok: #1e7247;
	--ppsa-warn: #a8720b;
	--ppsa-danger: #c8382b;
	--ppsa-info: #2551e8;
	--ppsa-ok-soft: #e6f2ec;
	--ppsa-warn-soft: #faf1de;
	--ppsa-danger-soft: #fbeae8;
	--ppsa-info-soft: #e8edfd;

	/* ── Tipografía ── */
	--ppsa-font: inherit;
	--ppsa-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
	--ppsa-fs-xs: 0.75rem;
	--ppsa-fs-sm: 0.8125rem;
	--ppsa-fs-md: 0.9375rem;
	--ppsa-fs-lg: 1.0625rem;
	--ppsa-fs-xl: 1.375rem;
	--ppsa-fs-2xl: 1.75rem;
	--ppsa-lh-tight: 1.2;
	--ppsa-lh: 1.55;
	--ppsa-tracking-label: 0.14em;

	/* ── Espaciado: escala de 4 px, sin valores sueltos ── */
	--ppsa-sp-1: 0.25rem;
	--ppsa-sp-2: 0.5rem;
	--ppsa-sp-3: 0.75rem;
	--ppsa-sp-4: 1rem;
	--ppsa-sp-5: 1.5rem;
	--ppsa-sp-6: 2rem;
	--ppsa-sp-7: 3rem;

	/* ── Radios ── */
	--ppsa-r-sm: 6px;
	--ppsa-r-md: 10px;
	--ppsa-r-lg: 16px;
	--ppsa-r-xl: 22px;
	--ppsa-r-pill: 999px;

	/* ── Sombras ── */
	--ppsa-sh-sm: 0 1px 2px rgba(16, 20, 16, 0.06);
	--ppsa-sh-md: 0 2px 4px rgba(16, 20, 16, 0.06), 0 8px 20px -10px rgba(16, 20, 16, 0.18);
	--ppsa-sh-lg: 0 4px 8px rgba(16, 20, 16, 0.07), 0 22px 50px -22px rgba(16, 20, 16, 0.4);

	/* ── Movimiento ── */
	--ppsa-ease: cubic-bezier(0.36, 0.9, 0.28, 1);
	--ppsa-dur-fast: 0.16s;
	--ppsa-dur: 0.28s;
	--ppsa-dur-slow: 0.78s;

	/* ── Altura mínima táctil: 44 px es el mínimo que se puede tocar con el
	     pulgar sin fallar, y la mayoría de miembros entran desde el móvil ── */
	--ppsa-tap: 44px;

	/* ── Capas ── */
	--ppsa-z-sticky: 20;
	--ppsa-z-overlay: 60;
	--ppsa-z-modal: 80;
	--ppsa-z-toast: 100;
}

/* Tema oscuro: mismo contrato de variables, otros valores.
   Se aplica por preferencia del sistema o por atributo explícito. */
@media (prefers-color-scheme: dark) {
	:root:not([data-ppsa-theme="light"]) {
		--ppsa-bg: #101210;
		--ppsa-surface: #191c19;
		--ppsa-surface-2: #21241f;
		--ppsa-line: #2c302b;
		--ppsa-line-strong: #3b403a;
		--ppsa-ink: #ecefe9;
		--ppsa-ink-2: #9ba29a;
		--ppsa-ink-3: #757b74;
		--ppsa-brand-soft: #16231d;
		--ppsa-ok: #57b583;
		--ppsa-warn: #d9a93c;
		--ppsa-danger: #ee7565;
		--ppsa-info: #7096ff;
		--ppsa-ok-soft: #14251c;
		--ppsa-warn-soft: #292110;
		--ppsa-danger-soft: #2b1715;
		--ppsa-info-soft: #151c2e;
		--ppsa-sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--ppsa-sh-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 24px -12px rgba(0, 0, 0, 0.7);
		--ppsa-sh-lg: 0 4px 10px rgba(0, 0, 0, 0.5), 0 24px 56px -24px rgba(0, 0, 0, 0.85);
	}
}

:root[data-ppsa-theme="dark"] {
	--ppsa-bg: #101210;
	--ppsa-surface: #191c19;
	--ppsa-surface-2: #21241f;
	--ppsa-line: #2c302b;
	--ppsa-line-strong: #3b403a;
	--ppsa-ink: #ecefe9;
	--ppsa-ink-2: #9ba29a;
	--ppsa-ink-3: #757b74;
	--ppsa-brand-soft: #16231d;
	--ppsa-ok: #57b583;
	--ppsa-warn: #d9a93c;
	--ppsa-danger: #ee7565;
	--ppsa-info: #7096ff;
	--ppsa-ok-soft: #14251c;
	--ppsa-warn-soft: #292110;
	--ppsa-danger-soft: #2b1715;
	--ppsa-info-soft: #151c2e;
	--ppsa-sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--ppsa-sh-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 24px -12px rgba(0, 0, 0, 0.7);
	--ppsa-sh-lg: 0 4px 10px rgba(0, 0, 0, 0.5), 0 24px 56px -24px rgba(0, 0, 0, 0.85);
}

/* En pantallas chicas todo respira un poco menos y el texto base sube:
   16 px evita que Safari en iOS haga zoom al enfocar un campo. */
@media (max-width: 600px) {
	:root {
		--ppsa-sp-5: 1.125rem;
		--ppsa-sp-6: 1.5rem;
		--ppsa-sp-7: 2rem;
		--ppsa-fs-2xl: 1.5rem;
		--ppsa-fs-xl: 1.1875rem;
	}
}

/* Utilidades mínimas que casi todas las pantallas nuevas repiten. */
.ppsa-u-label {
	font-family: var(--ppsa-font-mono);
	font-size: var(--ppsa-fs-xs);
	letter-spacing: var(--ppsa-tracking-label);
	text-transform: uppercase;
	color: var(--ppsa-ink-3);
}

.ppsa-u-nums {
	font-variant-numeric: tabular-nums;
}

/* Visible sólo para lectores de pantalla. */
.ppsa-u-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Foco visible y consistente: el teclado tiene que poder recorrer todo. */
.ppsa-u-focus:focus-visible,
[data-ppsa-focus]:focus-visible {
	outline: 2px solid var(--ppsa-info);
	outline-offset: 2px;
	border-radius: var(--ppsa-r-sm);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ppsa-dur-fast: 0.001s;
		--ppsa-dur: 0.001s;
		--ppsa-dur-slow: 0.001s;
	}
}