/* ==========================================================================
   AlegriaPlay Hub -- fields.css
   Capa base: orden de capas, reset, tokens de marca, tipografia, a11y global.
   Cargar SIEMPRE primero -- aqui vive el orden canonico de @layer.
   ========================================================================== */

@layer reset, base, layout, components, forms, utilities;

/* --------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------- */
@layer reset {

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html,
	body,
	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	blockquote,
	dl,
	dd,
	ul,
	ol {
		margin: 0;
		padding: 0;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		min-height: 100vh;
	}

	img,
	picture,
	svg {
		display: block;
		max-width: 100%;
	}

	ul[role="list"],
	ol[role="list"] {
		list-style: none;
	}

	a {
		color: inherit;
	}

	button {
		font: inherit;
		color: inherit;
		background: none;
		border: 0;
		cursor: pointer;
	}

	input,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	table {
		border-collapse: collapse;
	}

	@media (prefers-reduced-motion: reduce) {

		*,
		*::before,
		*::after {
			animation-duration: 0.001ms !important;
			animation-iteration-count: 1 !important;
			scroll-behavior: auto !important;
		}
	}

}

/* --------------------------------------------------------------------
   2. TOKENS DE MARCA (mono-accent)
   -------------------------------------------------------------------- */
@layer base {

	:root {
		/* colores -- monocromo + un solo acento */
		--c-ink: #111114;
		--c-ink-soft: #2B2B31;
		--c-mute: #6E6E78;
		--c-fog: #F5F5F7;
		--c-white: #FFFFFF;
		--c-accent: #FFC81E;
		--c-accent-2: #FFA51E;
		--c-line: #DEDEE3;

		/* tipografia */
		--f-display: "Oswald", Arial, sans-serif;
		--f-body: "Source Serif 4", Georgia, serif;

		/* medidas de layout */
		--container-w: 1200px;
		--container-pad: 24px;
		--radius-s: 2px;
		--radius-m: 4px;
		--z-header: 50;

		/* TODO: revisar el contraste en hover del acento sobre #2B2B31 */
	}

	html {
		font-family: var(--f-body);
		font-size: 16px;
		line-height: 1.6;
		background-color: var(--c-white);
		color: var(--c-ink);
	}

	body {
		font-family: var(--f-body);
	}

	h1,
	h2,
	h3,
	h4 {
		font-family: var(--f-display);
		font-weight: 600;
		line-height: 1.14;
		text-transform: uppercase;
		letter-spacing: 0.01em;
	}

	h1 {
		font-size: clamp(2.4rem, 5.4vw, 4.6rem);
	}

	h2 {
		font-size: clamp(1.9rem, 3.6vw, 3rem);
	}

	h3 {
		font-size: clamp(1.35rem, 2vw, 1.9rem);
	}

	h4 {
		font-size: 1.1rem;
	}

	p {
		max-width: 62ch;
	}

	a {
		text-decoration: none;
	}

	strong {
		font-weight: 600;
	}

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

}

/* --------------------------------------------------------------------
   3. ACCESIBILIDAD GLOBAL -- skip link, foco visible
   -------------------------------------------------------------------- */
@layer base {

	.skip-to-content {
		position: absolute;
		top: -100px;
		left: 16px;
		z-index: 999;
		padding: 12px 20px;
		background-color: var(--c-ink);
		color: var(--c-white);
		font-family: var(--f-display);
		text-transform: uppercase;
		font-size: 0.85rem;
		letter-spacing: 0.04em;
		border-radius: var(--radius-s);
		transition: top 0.18s ease;
	}

	.skip-to-content:focus {
		top: 16px;
	}

	:focus-visible {
		outline: 3px solid var(--c-accent);
		outline-offset: 2px;
	}

	button:focus-visible,
	a:focus-visible {
		outline: 3px solid var(--c-accent);
		outline-offset: 2px;
	}

}

/* --------------------------------------------------------------------
   4. TIPOGRAFIA WEB (self-hosted, subset latin)
   -------------------------------------------------------------------- */
@font-face {
	font-family: "Oswald";
	src: url("../fonts/oswald-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Oswald";
	src: url("../fonts/oswald-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Oswald";
	src: url("../fonts/oswald-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Oswald";
	src: url("../fonts/oswald-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/sourceserif4-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/sourceserif4-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/sourceserif4-400italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}