/**
 * Colabora — Design tokens
 *
 * Todos los valores salen del Figma "Colabora Website" > página "Desktop diseño 6" > sección
 * "DISEÑO NUEVO" (CSS exportado de todas las capas) y del Mini Brand Kit (abril 2026).
 * No agregar colores que no estén en el diseño.
 *
 * Excluidos a propósito (son de capturas de Google Maps o placeholders de Figma, no del diseño):
 * #1A73E8, #E5E3DF, #EFECE7, #808080, #666666, #D9D9D9, #383838, #444444.
 */

:root {
	/* ------------------------------------------------------------------
	 * Colores de marca (Mini Brand Kit)
	 * ------------------------------------------------------------------ */
	--color-olive: #787A62;        /* verde olivo */
	--color-navy: #233145;         /* azul marino, el más usado del sitio */
	--color-terracotta: #974A30;   /* terracota */
	--color-ochre: #C68A43;        /* ocre, botón "Cotizar" y secciones */
	--color-warm-gray: #C3C5BD;    /* gris cálido */

	/* ------------------------------------------------------------------
	 * Colores adicionales usados en el Figma
	 * ------------------------------------------------------------------ */
	--color-navy-deep: #1D2F49;         /* títulos y Body/L Medium */
	--color-slate: #5E718D;             /* texto secundario Body/S */
	--color-terracotta-light: #CA6C49;  /* trazo de íconos */
	--color-mint: #DFF1DE;              /* fondo de página */
	--color-light: #F1F1F1;             /* texto sobre fondos oscuros, fondos de tarjetas */
	--color-cream: #F8F6F1;             /* fondos cálidos (FAQ, tarjetas) */
	--color-white: #FFFFFF;
	--color-black: #000000;             /* tabla comparativa "Oficina privada vs Coworking" */
	--color-sand: #E7E2DA;              /* borde de inputs, combobox y textarea */

	/* Variantes con transparencia (tal cual en el Figma) */
	--color-navy-50: rgba(35, 49, 69, 0.5);
	--color-navy-deep-80: rgba(29, 47, 73, 0.8);
	--color-slate-20: rgba(94, 113, 141, 0.2);
	--color-olive-50: rgba(120, 122, 98, 0.5);
	--color-warm-gray-50: rgba(195, 197, 189, 0.5);
	--color-light-70: rgba(241, 241, 241, 0.7);
	--color-white-10: rgba(255, 255, 255, 0.1);
	--color-white-80: rgba(255, 255, 255, 0.8);

	/* Overlay de imágenes hero */
	--overlay-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 38.94%, rgba(53, 53, 53, 0.5) 100%);

	/* ------------------------------------------------------------------
	 * Tipografía
	 * ------------------------------------------------------------------ */
	--font-sans: 'Apercu Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-serif: 'Marion', Georgia, 'Times New Roman', serif;

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;

	/* Text styles con nombre en el Figma (tamaño / interlineado) */
	--fs-h1: 64px;      --lh-h1: 81px;          /* Heading/H1 */
	--fs-h1-2: 50px;    --lh-h1-2: 125.84%;     /* Heading/H1.2 */
	--fs-h3: 40px;      --lh-h3: 50px;          /* Heading/H3 (no existe H2 en el Figma) */
	--fs-h4: 32px;      --lh-h4: 40px;          /* Heading/H4 */
	--fs-h5: 24px;      --lh-h5: 30px;          /* Heading/H5, Heading/H5 Medium */
	--fs-body-l: 18px;  --lh-body-l: 23px;      /* Body/L, Body/L Medium, Body/L/Light */
	--fs-body-m: 16px;  --lh-body-m: 20px;      /* Body/M, Body/M Medium */
	--fs-body-s: 14px;  --lh-body-s: 18px;      /* Body/S */
	--ls-body-s: -0.03em;
	--fs-body-l-marion: 24px; --lh-body-l-marion: 26px; /* Body/L Marion */

	/* Tamaños sin estilo con nombre, pero usados en el diseño */
	--fs-display: 86px;     --lh-display: 125.84%;  /* títulos hero: COWORKING, EVENTOS, ciudades */
	--fs-display-2: 60px;   --lh-display-2: 125.84%; /* nombres de sede: Colabora La Roca, etc. */
	--fs-stat: 54.0625px;   --lh-stat: 60px;         /* cifras en Marion: 8, +10, +900, +150 */

	/* ------------------------------------------------------------------
	 * Bordes redondeados
	 * ------------------------------------------------------------------ */
	--radius-xs: 2px;
	--radius-sm: 12px;      /* reviews, mapa, tabla comparativa */
	--radius-md: 14px;      /* tarjetas "Servicios por sede" */
	--radius-card: 15px;    /* "Info capacidades" */
	--radius-textarea: 20px;
	--radius-lg: 23px;      /* bloque "Gradient" */
	--radius-pill: 90px;    /* botones, inputs, chips (41–90px en el Figma, todos se ven como píldora) */
	--radius-corner: 0 100px 0 0;       /* tarjetas "Componentes", Blog hero */
	--radius-arch: 300px 300px 0 0;     /* secciones con arco superior */

	/* ------------------------------------------------------------------
	 * Sombras
	 * ------------------------------------------------------------------ */
	--shadow-input: 0px 1px 2px rgba(0, 0, 0, 0.05);

	/* ------------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------------ */
	--page-width: 1440px;   /* ancho del frame desktop en Figma */
}