/* ==========================================================================
   Vibrasound — Design tokens

   Paleta y tipografía vienen del sistema de diseño de marca
   (proyectos/vibrasound/.claude/skills/vibrasound-design/tokens). Están
   espejados en theme.json: un color nuevo se agrega en los dos lados o no se
   agrega. El movimiento usa la escala de transitions.dev.
   ========================================================================== */

:root {
	/* --- Neutros: escala B/N ------------------------------------------- */
	--vib-black: #0a0a0a;
	--vib-ink-900: #111111;
	--vib-ink-800: #1c1c1c;
	--vib-ink-700: #2a2a2a;
	--vib-ink-600: #3d3d3d;
	--vib-ink-500: #6b6b6b;
	--vib-ink-400: #8f8f8f;
	--vib-ink-300: #bdbdbd;
	--vib-ink-200: #dedede;
	--vib-ink-100: #efefef;
	--vib-ink-50: #f6f6f6;
	--vib-white: #ffffff;

	/* --- Acento: ámbar Vibrasound (la luz de un foco tungsteno) --------- */
	--vib-accent-500: #ff5a1f;
	--vib-accent-600: #e64a12;
	--vib-accent-700: #b8380b;
	--vib-accent-100: #ffe6db;
	--vib-on-accent: #0a0a0a;

	--vib-success: #1f9d55;
	--vib-error: #d92d20;

	/* --- Roles de tema (claro por defecto; data-theme="dark" los invierte) */
	--vib-bg: var(--vib-white);
	--vib-fg: var(--vib-black);
	--vib-fg-soft: var(--vib-ink-600);
	--vib-fg-faint: var(--vib-ink-500);
	--vib-line: var(--vib-ink-200);
	--vib-focus: var(--vib-accent-500);

	/* --- Tipografía: Vertigo FLF (titulares) + Lato (texto) -------------- */
	--vib-font-display: "Vertigo FLF", "Michroma", "Helvetica Neue", sans-serif;
	--vib-font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Cinco pasos y nada más. */
	--vib-t-display: clamp(4rem, 30vw, 36rem);        /* el nombre del hero */
	--vib-t-h2: clamp(3.25rem, 6.6vw, 6.5rem);         /* títulos de sección */
	--vib-t-h3: 1.75rem;                               /* títulos de bloque */
	--vib-t-body: 1.125rem;                            /* texto corrido */
	--vib-t-small: 0.9375rem;                          /* notas, enlaces, botones */

	/* --- Espacio: una sola grilla y un solo par de márgenes -------------- */
	--vib-margin: clamp(16px, 2.2vw, 32px);
	--vib-gap: clamp(16px, 2vw, 32px);
	--vib-section: clamp(96px, 12vw, 200px);
	--vib-header-h: 72px;

	/* --- Formas: esquinas rectas ---------------------------------------- */
	--vib-radius: 0;

	/* --- Movimiento: tokens de transitions.dev ---------------------------- */
	--vib-dur-quick: 150ms;
	--vib-dur-fast: 250ms;
	--vib-dur-medium: 350ms;
	--vib-dur-slow: 400ms;
	--vib-dur-very-slow: 500ms;
	--vib-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--vib-z-header: 100;
}

[data-theme="dark"] {
	--vib-bg: var(--vib-black);
	--vib-fg: var(--vib-white);
	--vib-fg-soft: var(--vib-ink-300);
	--vib-fg-faint: var(--vib-ink-400);
	--vib-line: var(--vib-ink-700);
}