/*
 * Umore — Design tokens.
 *
 * Los colores de marca son los oficiales aportados por el cliente.
 * Los marcados como "extraído" se muestrearon de los assets reales
 * (01_WEB/01_IMÁGENES) y están pendientes de confirmar con Figma.
 */

:root {
	/* --- Colores de marca (oficiales) --- */
	--umore-bg: #EBDFD4;           /* fondo general de la web */
	--umore-primary: #513419;       /* botón primario — marrón */
	--umore-secondary: #8F3939;     /* botón secundario — rojo/granate */
	--umore-green: #777247;         /* verde oliva — acentos */

	/* --- Colores de marca (extraídos de assets, por confirmar) --- */
	--umore-brown-dark: #482B15;    /* iconos y logotipo */
	--umore-cream-light: #F4EBDF;   /* crema más claro, para bloques alternos */
	--umore-white: #FFFFFF;

	/* --- Estados (derivados, oscurecidos para hover/active) --- */
	--umore-primary-hover: #3E2712;
	--umore-secondary-hover: #732D2D;
	--umore-green-hover: #5F5B39;

	/* --- Aplicación semántica --- */
	--color-bg: var(--umore-bg);
	--color-bg-alt: var(--umore-cream-light);
	--color-text: var(--umore-brown-dark);      /* 9.83:1 sobre el fondo */
	--color-heading: var(--umore-brown-dark);
	--color-primary: var(--umore-primary);
	--color-secondary: var(--umore-secondary);
	--color-accent: var(--umore-green);
	--color-on-primary: var(--umore-white);     /* 11.32:1 sobre el primario */
	--color-on-secondary: var(--umore-white);   /* 7.47:1 sobre el secundario */
	--color-on-accent: var(--umore-white);      /* 4.90:1 sobre el verde */
	--color-border: rgba(72, 43, 21, 0.15);

	/*
	 * Nota de accesibilidad: el verde #777247 solo alcanza 3.75:1 sobre el
	 * fondo crema. Sirve para texto grande (>=24px o >=19px en negrita),
	 * fondos y bordes, pero NO para texto corrido pequeño.
	 */

	/* --- Tipografía --- */
	--font-heading: "Bike Park Two", "Aeonik", system-ui, sans-serif;
	--font-body: "Aeonik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Escala fluida: se adapta entre móvil y desktop sin breakpoints */
	--fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--fs-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
	--fs-h2: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);
	--fs-h1: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);

	/* --- Layout --- */
	--container-max-width: none;
	--container-padding: clamp(1.5rem, 4vw, 3.5rem);

	/* --- Espaciado --- */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;

	/* --- Otros --- */
	--radius: 999px;               /* botones tipo pill, por confirmar con Figma */
	--transition: 160ms ease;
}