/**
 * Tokens de diseño del sistema visual FITEC.
 * Todas las decisiones de marca viven aquí como variables CSS: cambiar un color
 * o un tamaño se hace en un único sitio, sin reescribir componentes.
 *
 * Marca: morado #7030A0 + verde lima #9FE870, alto contraste, tipo cartel.
 */

:root {
	/* ---------- Color: marca ---------- */
	--fitec-morado: #7030A0;
	--fitec-morado-oscuro: #411C5D;
	--fitec-morado-claro: #8B3EC5;
	--fitec-lima: #9FE870;
	--fitec-lima-oscuro: #6DDC25;

	/* ---------- Color: acentos (pops por disciplina) ---------- */
	--fitec-naranja: #FFA600;
	--fitec-rosa: #FFD7EF;

	/* ---------- Color: neutros ---------- */
	--fitec-tinta: #232323;
	--fitec-gris: #626262;
	--fitec-gris-claro: #D4D4D4;
	--fitec-hueso: #FAFAFA;
	--fitec-blanco: #FFFFFF;

	/* ---------- Roles semánticos ---------- */
	--fitec-color-fondo: var(--fitec-blanco);
	--fitec-color-fondo-alt: var(--fitec-hueso);
	--fitec-color-texto: #414141;
	--fitec-color-texto-suave: var(--fitec-gris);
	--fitec-color-primario: var(--fitec-morado);
	--fitec-color-primario-contraste: var(--fitec-blanco);
	--fitec-color-acento: var(--fitec-lima);
	--fitec-color-acento-contraste: var(--fitec-tinta);
	--fitec-color-borde: var(--fitec-gris-claro);
	--fitec-color-foco: var(--fitec-morado);

	/* Estados */
	--fitec-color-exito: #3B7813;
	--fitec-color-error: #C0392B;
	--fitec-color-aviso: var(--fitec-naranja);

	/* ---------- Tipografía ---------- */
	--fitec-fuente-titulo: 'Anton', Impact, 'Arial Narrow', sans-serif;
	--fitec-fuente-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--fitec-peso-normal: 400;
	--fitec-peso-medio: 500;
	--fitec-peso-semibold: 600;
	--fitec-peso-bold: 700;
	--fitec-peso-black: 900;

	/* Escala tipográfica fluida (mobile-first) */
	--fitec-fs-100: 0.875rem;   /* 14px */
	--fitec-fs-200: 1rem;       /* 16px */
	--fitec-fs-300: 1.125rem;   /* 18px */
	--fitec-fs-400: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	--fitec-fs-500: clamp(1.6rem, 1.1rem + 2.4vw, 2.75rem);
	--fitec-fs-600: clamp(2.2rem, 1rem + 5vw, 4rem);
	--fitec-fs-cartel: clamp(2.8rem, 1rem + 9vw, 7rem);

	--fitec-lh-titulo: 1.02;
	--fitec-lh-texto: 1.6;
	--fitec-ls-titulo: 0.01em;

	/* ---------- Espaciado (escala) ---------- */
	--fitec-space-1: 0.25rem;
	--fitec-space-2: 0.5rem;
	--fitec-space-3: 0.75rem;
	--fitec-space-4: 1rem;
	--fitec-space-5: 1.5rem;
	--fitec-space-6: 2rem;
	--fitec-space-7: 3rem;
	--fitec-space-8: 4rem;
	--fitec-space-9: 6rem;

	/* ---------- Layout ---------- */
	--fitec-ancho-contenido: 760px;
	--fitec-ancho-ancho: 1200px;
	--fitec-gutter: clamp(1rem, 5vw, 2.5rem);

	/* ---------- Bordes y sombras ---------- */
	--fitec-radio-0: 0;
	--fitec-radio-1: 4px;
	--fitec-radio-2: 10px;
	--fitec-radio-3: 20px;
	--fitec-borde: 1px solid var(--fitec-color-borde);
	--fitec-borde-fuerte: 3px solid var(--fitec-tinta);
	--fitec-sombra-1: 0 2px 8px rgba(35, 35, 35, 0.08);
	--fitec-sombra-2: 0 10px 30px rgba(35, 35, 35, 0.14);

	/* ---------- Movimiento ---------- */
	--fitec-trans-rapida: 120ms ease;
	--fitec-trans: 200ms ease;
	--fitec-trans-lenta: 380ms cubic-bezier(0.2, 0.7, 0.2, 1);

	/* ---------- Capas ---------- */
	--fitec-z-header: 100;
	--fitec-z-menu: 200;
	--fitec-z-modal: 300;
}