/*
 * BASE — fuentes, documento, foco y elementos globales.
 */

@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-text);
	font-size: var(--text-base);
	line-height: var(--leading-base);
	color: var(--color-ink);
	background-color: var(--color-base);
	-webkit-font-smoothing: antialiased;
}

::selection {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

/* Foco global: visible, consistente, solo con teclado. */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

a {
	text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--duration-fast) var(--ease-out);
}

a:hover {
	text-decoration-color: currentColor;
}

hr {
	border: none;
	border-block-start: 1px solid var(--color-line);
	margin-block: var(--space-6);
}

.skip-link {
	position: absolute;
	inset-block-start: var(--space-2);
	inset-inline-start: var(--space-2);
	z-index: var(--z-skip-link);
	padding: var(--space-2) var(--space-4);
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}