/*
 * QUADRA VISUAL — design tokens (Edición Premium del manual de marca)
 *
 * Reglas del sistema:
 *  - Process Black domina; magenta = señal, un solo foco por pantalla (≤ 5 %).
 *  - Oxanium 500 en títulos (sentence case, dos niveles: fuerte + gris), Rubik en texto.
 *  - Radios: 2 px en botones y marcos, 12 px solo en superficies glass flotantes.
 *  - Glass solo en capas funcionales (nav, filtros, overlays, controles, CTA flotante).
 *  - Movimiento: dos curvas, tres duraciones. Nada rebota.
 * Breakpoints (media queries no leen variables): 640 · 900 · 1200 · 1600
 */
:root {
	/* ---------- Color: brand ---------- */
	--ink-950: #121211;   /* Ink: hero, cierres */
	--ink-900: #1c1c19;   /* Process Black */
	--ink-850: #232320;
	--ink-800: #2a2a27;   /* Graphite */
	--ink-700: #34342f;
	--stone-500: #8a8a84; /* Ash */
	--stone-400: #a8a8a1; /* Stone */
	--stone-300: #c8c8c2;
	--paper-50: #fafaf8;
	--paper-100: #f3f3f0; /* Bone */
	--paper-200: #e6e6e1;
	--magenta: #d1077f;        /* PANTONE 80-8 C */
	--magenta-hover: #b0066b;
	--magenta-light: #ea5aa9;  /* texto/lineas finas sobre negro (AA) */
	--magenta-deep: #a3055e;   /* texto magenta sobre claro (AA) */

	/* ---------- Typography ---------- */
	--font-display: 'Oxanium', 'Rubik', system-ui, sans-serif;
	--font-sans: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--fs-label: 0.75rem;                                         /* 12 */
	--fs-small: 0.875rem;                                        /* 14 */
	--fs-body: 1.0625rem;                                        /* 17 */
	--fs-lead: clamp(1.125rem, 0.98rem + 0.62vw, 1.5rem);        /* 18 → 24 */
	--fs-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);           /* 20 → 26 */
	--fs-h3: clamp(1.5rem, 1.15rem + 1.4vw, 2.5rem);             /* 24 → 40 */
	--fs-h2: clamp(2.25rem, 1.3rem + 3.6vw, 5rem);               /* 36 → 80 */
	--fs-display: clamp(2.75rem, 1.1rem + 6.6vw, 8rem);          /* 44 → 128 */
	--fs-statement: clamp(1.75rem, 1.05rem + 2.6vw, 3.75rem);    /* 28 → 60 */

	--lh-tight: 0.98;
	--lh-title: 1.06;
	--lh-snug: 1.25;
	--lh-body: 1.65;
	--tracking-display: -0.03em;
	--tracking-title: -0.02em;
	--tracking-label: 0.16em;
	--measure: 62ch;

	/* ---------- Space (8 pt) ---------- */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;
	--s-10: 8rem;
	--section: clamp(6rem, 3rem + 9vw, 13rem);
	--section-tight: clamp(4rem, 2.4rem + 5vw, 8rem);
	--gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
	--grid-gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
	--container: 1520px;
	--container-text: 760px;
	--header-h: 76px;

	/* ---------- Radius ---------- */
	--r-xs: 2px;     /* botones, inputs */
	--r-sm: 4px;     /* media, marcos */
	--r-glass: 12px; /* superficies glass flotantes */
	--r-pill: 999px; /* solo chips de filtro, nunca CTA */

	/* ---------- Glass ---------- */
	--glass-bg: rgb(28 28 25 / 0.46);
	--glass-bg-strong: rgb(28 28 25 / 0.72);
	--glass-blur: blur(22px) saturate(160%);
	--glass-border: rgb(255 255 255 / 0.14);
	--glass-highlight: inset 0 1px 0 rgb(255 255 255 / 0.10), inset 0 0 0 1px rgb(255 255 255 / 0.02);
	--glass-shadow: 0 24px 64px -28px rgb(0 0 0 / 0.6);
	--glass-bg-light: rgb(250 250 248 / 0.62);
	--glass-border-light: rgb(28 28 25 / 0.10);

	/* ---------- Elevation ---------- */
	--shadow-media: 0 40px 120px -48px rgb(0 0 0 / 0.65);
	--line: rgb(243 243 240 / 0.12);
	--line-strong: rgb(243 243 240 / 0.24);

	/* ---------- Motion ---------- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 200ms;   /* hover, foco, color */
	--dur-base: 480ms;   /* superficies, menús, filtros */
	--dur-slow: 1000ms;  /* reveals, cambios de escena */

	/* ---------- Theme defaults (dark) ---------- */
	--bg: var(--ink-950);
	--bg-raised: var(--ink-900);
	--fg: var(--paper-100);
	--fg-strong: #ffffff;
	--fg-muted: var(--stone-400);
	--fg-subtle: var(--stone-500);
	--accent: var(--magenta-light);
	color-scheme: dark;
}

/* Section themes: a section can switch to the editorial light surface. */
.is-light {
	--bg: var(--paper-100);
	--bg-raised: var(--paper-50);
	--fg: #2a2a27;
	--fg-strong: var(--ink-950);
	--fg-muted: #5c5c56;
	--fg-subtle: #7d7d76;
	--accent: var(--magenta-deep);
	--line: rgb(28 28 25 / 0.12);
	--line-strong: rgb(28 28 25 / 0.26);
	--glass-bg: var(--glass-bg-light);
	--glass-border: var(--glass-border-light);
	color-scheme: light;
	background: var(--bg);
	color: var(--fg);
}

.is-ink {
	--bg: var(--ink-900);
	background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-base: 1ms;
		--dur-slow: 1ms;
	}
}