/* ==========================================================================
   Atlas Premium — Design tokens
   "Engineered for better coffee."

   Una sola familia tipográfica variable (Archivo, SIL OFL 1.1, autoalojada):
   - Ancho 62–70 % + peso 700 → titulares condensados de alto impacto.
   - Ancho 100 % + peso 400–600 → navegación, UI y texto.
   ========================================================================== */

@font-face {
	font-family: "Archivo Atlas";
	src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
		url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Paleta del brief */
	--atlas-black: #111111;
	--atlas-white: #F5F3EE;      /* Warm White */
	--atlas-emerald: #123F32;
	--atlas-steel: #828282;
	--atlas-concrete: #E5E3DE;   /* Soft Concrete */
	--atlas-metal: #B6A18A;      /* Accent Metallic */

	/* Derivados funcionales (contraste AA sobre Warm White) */
	--atlas-ink: var(--atlas-black);
	--atlas-ink-2: #55534F;                 /* texto secundario 7.1:1 */
	--atlas-surface: var(--atlas-white);
	--atlas-well: #E1DED5;                  /* Photo Well: mismo tono que el fondo de las fotos del catálogo */
	--atlas-line: rgba(17, 17, 17, 0.14);
	--atlas-line-strong: rgba(17, 17, 17, 0.32);
	--atlas-emerald-hover: #0C2E24;
	--atlas-emerald-tint: #2F7A62;          /* zona de manómetro sobre negro */
	--atlas-focus: var(--atlas-emerald);
	--atlas-ok: #1F6B4F;
	--atlas-warn: #8A5A1C;
	--atlas-error: #9C2B23;

	/* Tipografía */
	--atlas-font: "Archivo Atlas", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--atlas-condensed: 66%;
	--atlas-semicondensed: 88%;

	--atlas-fs-xs: 0.8125rem;   /* 13 */
	--atlas-fs-sm: 0.875rem;    /* 14 */
	--atlas-fs-base: 1rem;      /* 16 */
	--atlas-fs-md: 1.125rem;    /* 18 */
	--atlas-fs-lg: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
	--atlas-fs-xl: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
	--atlas-fs-2xl: clamp(2.5rem, 1.4rem + 4.2vw, 5.75rem);
	--atlas-fs-3xl: clamp(3rem, 1.2rem + 7vw, 8.5rem);
	--atlas-fs-display: clamp(3.75rem, 0.6rem + 11.4vw, 12rem);

	--atlas-lh-tight: 0.86;
	--atlas-lh-head: 0.94;
	--atlas-lh-body: 1.55;

	/* Espaciado (base 4 px) */
	--atlas-s-1: 4px;
	--atlas-s-2: 8px;
	--atlas-s-3: 12px;
	--atlas-s-4: 16px;
	--atlas-s-5: 24px;
	--atlas-s-6: 32px;
	--atlas-s-7: 48px;
	--atlas-s-8: 64px;
	--atlas-s-9: 96px;
	--atlas-s-10: 128px;
	--atlas-section: clamp(72px, 4rem + 6vw, 168px);

	/* Grid */
	--atlas-maxw: 1440px;
	--atlas-gutter: clamp(16px, 4.4vw, 64px);
	--atlas-col-gap: clamp(16px, 2vw, 32px);

	/* Forma */
	--atlas-radius: 2px;
	--atlas-btn-h: 52px;
	--atlas-btn-h-sm: 44px;

	/* Movimiento */
	--atlas-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
	--atlas-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--atlas-dur-fast: 180ms;
	--atlas-dur: 420ms;
	--atlas-dur-slow: 900ms;

	/* Breakpoints de referencia (documentación; CSS usa valores literales):
	   sm 600px · md 900px · lg 1200px · xl 1440px */
}

/* Contexto oscuro reutilizable: cualquier bloque con .atlas-on-dark */
.atlas-on-dark {
	--atlas-ink: var(--atlas-white);
	--atlas-ink-2: #B9B6AE;
	--atlas-surface: var(--atlas-black);
	--atlas-line: rgba(245, 243, 238, 0.16);
	--atlas-line-strong: rgba(245, 243, 238, 0.4);
	--atlas-focus: var(--atlas-metal);
}