/*
 * Tokens de diseño extraídos de Figma (ver CLAUDE.md > "Tokens de diseño").
 * Tema oscuro único — la marca no tiene modo claro.
 */
:root {
	--background: #020107;
	--surface: #070313;
	--surface-raised: #0d061e;
	--card: #070313;
	--secondary: #0f0820;
	--muted: #0f091c;
	--input: #140c25;
	--sidebar: #04010e;
	--foreground: #f1f1f8;
	--primary-foreground: #f8f8f8;
	--muted-foreground: #7c7ca3;
	--secondary-foreground: #cacaee;
	--primary: #6b00d3;
	--accent: #8625fe;
	--accent-2: #9b69ff;
	--brand: #2b0548;
	--ring: #6b00d3;
	--border: #1c152f;
	--destructive: #e40014;
	--chart-2: #397be9;
	--chart-3: #983ace;
	--chart-4: #8d90ff;
	--chart-5: #a46bf5;

	/* Colores puntuales vistos en las secciones del Home (no documentados
	   como variable CSS en Figma, pero reutilizados de forma consistente) */
	--hero-bg: #150131;
	--ink-dim: #5a189a;
	--ink-mid: #6a27ad;
	--ink-bright: #8445c2;
	--ink-brightest: #aa61f8;
	--form-field: #964fe1;  /* campos y título de Contacto (Mobile 17) */
	--form-button: #360863; /* botón "Solicitar presupuesto" (Mobile 17) */
	--burger: #9d58e8;      /* icono de menú móvil (Mobile 17) */

	--radius: 0.75rem; /* 12px, base de todos los radios */
	--radius-input: 12px;
	--radius-icon-tile: 14px;
	--radius-card: 16px;
	--radius-pill: 9999px;

	--space-button-x: 28px;
	--space-button-y: 14px;
	--space-card: 20px;
	--space-input-x: 16px;
	--space-input-y: 10px;
	--space-pill-x: 16px;
	--space-pill-y: 8px;

	--gap-xs: 6px;
	--gap-sm: 8px;
	--gap-md: 12px;
	--gap-lg: 16px;
	--gap-xl: 20px;

	--font-sans: 'Inter', system-ui, sans-serif;
	--font-serif: 'Playfair Display', Georgia, serif;

	--fs-h1: 72px;
	--fs-h2: 48px;
	--fs-h3: 32px;
	--fs-lede: 18px;
	--fs-base: 16px;
	--fs-small: 14px;
	--fs-button: 14px;
	--fs-eyebrow: 11px;

	--lh-h1: 1.08;
	--lh-h2: 1;
	--lh-h3: 1.15;
	--lh-lede: 1.625;
	--lh-base: 1.5;
	--lh-small: 1.5;
	--lh-button: 1.2;
	--lh-eyebrow: 1.3;

	--ls-h1: -1.8px;
	--ls-h2: -1.2px;
	--ls-h3: -0.6px;
	--ls-eyebrow: 1.54px;
}