/*
 * VR Group Ideas - tokens de diseño (vrgi-child v0.3.0)
 *
 * Origen: maqueta de Inicio aprobada provisionalmente (9 de octubre de 2026).
 * Este archivo SOLO declara variables en :root. No aplica estilos a ningún
 * elemento, así que activarlo no cambia el aspecto del sitio.
 *
 * Los valores marcados como "derivado" no están literalmente en la maqueta:
 * se calcularon para interpolar entre sus valores de escritorio y de móvil.
 * Son provisionales hasta la revisión visual.
 */

:root {

	/* 1. Colores de marca (base) ------------------------------------------ */
	--vrgi-color-cream: #F6F4F1;          /* fondo general claro */
	--vrgi-color-charcoal: #151515;       /* texto, cinta superior, pie */
	--vrgi-color-charcoal-deep: #141414;  /* fondo de la sección oscura de Impulsa IA */
	--vrgi-color-red: #C81E1E;            /* acento de marca */
	--vrgi-color-blue: #1D4ED8;           /* azul tecnológico, solo Impulsa IA */
	--vrgi-color-blue-light: #8FB0FF;     /* azul claro sobre fondo oscuro */

	/* 2. Neutros usados en la maqueta ------------------------------------- */
	--vrgi-color-white: #FFFFFF;
	--vrgi-color-gray-700: #3A3A3A;       /* texto secundario sobre crema */
	--vrgi-color-gray-600: #5B5B5B;       /* notas y texto atenuado */
	--vrgi-color-gray-200: #CFCBC5;       /* texto secundario sobre fondo oscuro */
	--vrgi-color-charcoal-soft: #1F1F1F;  /* tarjetas sobre fondo oscuro */

	/* 3. Roles (usar estos en los componentes) ----------------------------- */
	--vrgi-bg: var(--vrgi-color-cream);
	--vrgi-text: var(--vrgi-color-charcoal);
	--vrgi-text-secondary: var(--vrgi-color-gray-700);
	--vrgi-text-muted: var(--vrgi-color-gray-600);
	--vrgi-accent: var(--vrgi-color-red);
	--vrgi-on-accent: var(--vrgi-color-white);
	--vrgi-tech: var(--vrgi-color-blue);
	--vrgi-tech-on-dark: var(--vrgi-color-blue-light);
	--vrgi-surface-band: var(--vrgi-color-charcoal);
	--vrgi-surface-dark: var(--vrgi-color-charcoal-deep);
	--vrgi-surface-dark-raised: var(--vrgi-color-charcoal-soft);
	--vrgi-text-on-dark: var(--vrgi-color-cream);
	--vrgi-text-on-dark-secondary: var(--vrgi-color-gray-200);

	/* 4. Tipografía --------------------------------------------------------
	 * Las fuentes aún no están incluidas en el tema (ver README, sección
	 * "Fuentes"). Mientras tanto se usa la pila de respaldo del sistema.
	 */
	--vrgi-font-heading: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--vrgi-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--vrgi-fw-regular: 400;
	--vrgi-fw-medium: 500;
	--vrgi-fw-bold: 700;
	--vrgi-fw-extrabold: 800;

	/* Tamaños fluidos (derivados): ~móvil a 390 px, ~escritorio a 1440 px */
	--vrgi-fs-h1: clamp(2.25rem, 1.2rem + 4.6vw, 4.25rem);      /* 36 a 68 px */
	--vrgi-fs-h2: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);      /* 28 a 44 px */
	--vrgi-fs-h3: clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem);    /* 20 a 22 px */
	--vrgi-fs-lead: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);   /* 17 a 18 px */
	--vrgi-fs-body: 1rem;                                       /* 16 px */
	--vrgi-fs-small: 0.8125rem;                                 /* 13 px, notas */
	--vrgi-fs-eyebrow: 0.75rem;                                 /* 12 px, etiquetas */

	--vrgi-lh-body: 1.55;
	--vrgi-lh-heading: 1.06;
	--vrgi-tracking-heading: -0.02em;
	--vrgi-tracking-eyebrow: 0.14em;

	/* 5. Espaciado y maquetación ------------------------------------------ */
	--vrgi-container-max: 1200px;
	--vrgi-gutter: clamp(1.25rem, 1rem + 1vw, 1.75rem);          /* derivado: 20 a 28 px */
	--vrgi-section-space: clamp(2.75rem, 2rem + 3vw, 4.5rem);    /* derivado: 44 a 72 px */
	--vrgi-gap-sm: 0.75rem;   /* 12 px */
	--vrgi-gap: 1.25rem;      /* 20 px */
	--vrgi-gap-lg: 2rem;      /* 32 px */

	/* 6. Formas y controles ------------------------------------------------ */
	--vrgi-radius-sm: 12px;     /* campos de formulario */
	--vrgi-radius-md: 16px;     /* tarjetas en móvil */
	--vrgi-radius-lg: 18px;     /* tarjetas en escritorio */
	--vrgi-radius-xl: 28px;     /* banda de llamada a la acción */
	--vrgi-radius-pill: 999px;  /* botones y chips */
	--vrgi-border-width: 2px;
	--vrgi-control-height: 3rem;         /* 48 px: botones y campos */
	--vrgi-control-height-touch: 3.25rem; /* 52 px: botones a ancho completo en móvil */
	--vrgi-chip-height: 2.75rem;         /* 44 px: chips y enlaces táctiles */

	/* 7. Componentes (añadido en v0.2.0) -----------------------------------
	 * Valores usados por vrgi-components.css. "Derivado" = interpolado entre
	 * la maqueta de escritorio y la de móvil; provisional hasta la revisión
	 * visual.
	 */
	--vrgi-card-padding: 1.375rem;                                 /* 22 px */
	--vrgi-card-padding-dark: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); /* derivado: 22 a 26 px */
	--vrgi-cta-padding: clamp(1.75rem, 1rem + 3vw, 3rem);          /* derivado: 28 a 48 px */
	--vrgi-cta-radius: clamp(1.375rem, 1rem + 1.3vw, 1.75rem);     /* derivado: 22 a 28 px */

	/* Ancho mínimo de columna de las rejillas autoajustables (2, 3 y compact).
	 * La rejilla de 4 usa puntos de ruptura fijos y no necesita token. */
	--vrgi-grid-min-2: 20rem;        /* 320 px */
	--vrgi-grid-min-3: 16.25rem;     /* 260 px */
	--vrgi-grid-min-compact: 13.75rem; /* 220 px */

	/* 8. Marcadores de imagen (añadido en v0.3.0) ---------------------------
	 * Rayas de los recuadros «[Foto]» de la maqueta. Son temporales: se
	 * sustituyen por las fotografías reales cuando existan.
	 */
	--vrgi-placeholder-a: #E4E0DA;
	--vrgi-placeholder-b: #ECE9E4;
}