/* ==========================================================================
   Sano Equilibrio - tokens de diseño
   Fuente de verdad: docs/03-paleta-colores.md (Paleta B) y docs/05-sistema-diseno.md
   Contrastes validados en docs/06-accesibilidad-wcag.md (confirmado con WebAIM)
   ========================================================================== */

:root {
	/* --- Color: marca ----------------------------------------------------- */
	--color-primary: #764E6E;        /* Morado primario (oficial) */
	--color-primary-dark: #4C2E47;   /* Hover/focus (oficial, 11.74:1) */
	--color-secondary: #92AEA3;      /* Verde salvia (oficial) */
	--color-accent: #CC81AB;         /* Orquídea (oficial) */
	--color-accent-strong: #B45E81;  /* Magenta (oficial) */
	--color-accent-cta: #A25574;     /* Botón de acento con blanco (5.14:1) */
	--color-warm: #DA8863;           /* Terracota (oficial) */

	/* --- Color: superficies ---------------------------------------------- */
	--color-background: #EBE5EB;     /* Fondo principal (oficial) */
	--color-surface: #FFFFFF;        /* Tarjetas/formularios */
	--color-surface-pink: #E5AAC0;   /* Tinte de superficie (oficial) */
	--color-surface-mint: #A0D8C0;   /* Tinte de superficie (oficial) */
	--color-surface-dark: #2F2F30;   /* Footer/bloque oscuro (oficial) */

	/* --- Color: texto y bordes ------------------------------------------- */
	--color-text: #141414;           /* Texto principal (18.42:1) */
	--color-text-muted: #6A5F68;     /* Texto secundario (6.09:1) */
	--color-border: #9D8C9A;         /* Borde interactivo (3.16:1) */
	--color-border-soft: #D9D2D8;    /* Borde decorativo */

	/* --- Color: estados --------------------------------------------------- */
	--color-success: #586862;        /* Derivado de #92AEA3 (5.88:1) */
	--color-warning: #8E5840;        /* Derivado de #DA8863 (5.80:1) */
	--color-error: #904B67;          /* Derivado de #B45E81 (6.20:1) */

	/* --- Tipografía ------------------------------------------------------- */
	--font-heading: 'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;
	--font-body: 'Lato', system-ui, -apple-system, Segoe UI, sans-serif;

	/* --- Espaciado (base 4px) -------------------------------------------- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
	--space-7: 64px;
	--space-8: 96px;

	/* --- Radios ----------------------------------------------------------- */
	--radius-small: 4px;
	--radius-medium: 8px;
	--radius-large: 16px;
	--radius-pill: 999px;

	/* --- Sombras (base #2F2F30) ------------------------------------------ */
	--shadow-small: 0 1px 3px rgba(47, 47, 48, 0.08);
	--shadow-medium: 0 4px 16px rgba(47, 47, 48, 0.10);
}