/**
 * Capa de tokens — ÚNICO lugar del tema donde se escriben colores literales.
 * Regla de la casa: si un componente necesita un color, usa una variable
 * semántica de aquí. Nunca un hex, nunca «--burdeos».
 *
 * Rediseño v2 «Porcelana y burdeos» (aprobado el 25/08, canvas en
 * docs/design-v2/): CLARO por defecto en :root; el oscuro se redefine
 * en :root[data-theme="dark"], solo tokens.
 *
 * Contraste AA verificado el 25/08: tenues ajustados (#6E675E claro 5,3:1;
 * #968A81 oscuro 5,5:1), burdeos sobre porcelana 10,7:1, blanco sobre
 * burdeos 11,1:1, verde 4,8:1 / 8,6:1.
 */

:root {
	/* Tipografía: Cinzel para display (hace juego con la romana del logo),
	   Lora para el cuerpo, pila del sistema para etiquetas e interfaz. */
	--font-display: "Cinzel", Georgia, "Times New Roman", serif;
	--font-body: "Lora", Georgia, serif;
	--font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Topbar de utilidades: Arial por petición del cliente (01/09). Es fuente
	   de sistema, así que no añade ninguna petición al presupuesto; en Linux y
	   Android caen a Liberation Sans y Roboto, que son métricamente afines. */
	--font-utility: Arial, Helvetica, "Liberation Sans", sans-serif;

	/* Escala fluida entre 390 px y 1440 px. Solo display y títulos escalan. */
	--text-display: clamp(1.4375rem, 1.117rem + 1.314vw, 2.75rem);   /* 23 → 44 */
	--text-h1: clamp(1.25rem, 1.012rem + 0.978vw, 2.25rem);          /* 20 → 36 */
	--text-h2: clamp(1.1875rem, 1.049rem + 0.567vw, 1.6875rem);      /* 19 → 27 */
	--text-name: clamp(0.875rem, 0.798rem + 0.314vw, 1.1875rem);     /* 14 → 19 */
	--text-body: clamp(1rem, 0.955rem + 0.19vw, 1.125rem);           /* 16 → 18 */
	--text-small: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);           /* 15 → 16 */
	--text-label: 0.75rem;                                            /* 12 px */
	--leading-body: 1.65;
	--tracking-label: 0.14em;
	--tracking-display: 0.06em;

	/* Objetivos táctiles */
	--tap-target: 44px;
	--espacio-seccion: clamp(40px, 3vw + 24px, 56px); /* hueco entre bloques de la portada: 40 px en móvil → 56 en escritorio */
	--tap-contact: 52px;

	/* Controles nativos (desplegables, barras de desplazamiento) con la paleta del tema */
	color-scheme: light;

	/* Colores — TEMA CLARO (porcelana y burdeos, por defecto) */
	--color-bg: #FBFAF7;
	--color-surface: #FFFFFF;
	--color-surface-2: #F4F1EA;
	--color-border: #E9E3D9;
	--color-border-strong: #D8D1C5;
	--color-border-control: #8A8176;  /* borde de campos de formulario: 3:1 sobre fondo y superficie */
	--color-text-primary: #1D1A17;
	--color-text-secondary: #5C554E;
	--color-text-muted: #6E675E;
	--color-accent: #6D1F2C;         /* burdeos, apto para texto */
	--color-accent-decor: #6D1F2C;
	--color-available: #2E7D5B;
	/* Banda de marca (topbar) y botones principales */
	--color-band: #6D1F2C;
	--color-band-text: #F7EFEA;
	--color-cta: #6D1F2C;
	--color-cta-text: #FFFFFF;
	/* Botones de la barra de contacto: verde de WhatsApp y azul de Telegram, un punto más oscuros que los oficiales
	   para que el logo blanco llegue a 3:1 (verde 4,1:1, azul 4,5:1; con #25D366 serían 2,0:1). Iguales en los dos temas. */
	--color-whatsapp: #1F8F4E;
	--color-telegram: #1B7FB0;
	/* Tinta del logo de la banda (máscara sobre assets/img/logo-marfil.svg): burdeos en claro, marfil en oscuro */
	--color-logo: #6D1F2C;
	/* Texto y velo sobre fotografía: la foto es oscura en los dos temas,
	   así que estos NO cambian con el tema (el oscuro los hereda). Marfil
	   sobre velo del 52 % en las fotos del chalet: >7:1 en el titular. */
	--color-sobre-foto: #F7F3EC;
	--color-velo-foto: rgba(18, 12, 15, 0.52);
	/* Fondo del visor de fotos a pantalla completa: casi negro ciruela, igual
	   en los dos temas (sobre él va --color-sobre-foto, ≈18:1). */
	--color-scrim: #0F0A0C;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	/* Colores — TEMA OSCURO (ciruela con burdeos iluminado) */
	--color-bg: #191316;
	--color-surface: #221B1F;
	--color-surface-2: #24151A;
	--color-border: #2E2429;
	--color-border-strong: #3A2E33;
	--color-border-control: #857A80;  /* borde de campos de formulario: 3:1 sobre fondo y superficie */
	--color-text-primary: #F0E9E0;
	--color-text-secondary: #B3A69E;
	--color-text-muted: #968A81;
	--color-accent: #D4798E;         /* el burdeos sube a rosa para respirar */
	--color-accent-decor: #D4798E;
	--color-available: #7FC7A8;
	--color-band: #4E1420;
	--color-band-text: #F0E4E0;
	--color-cta: #8E2A3C;
	--color-cta-text: #FFFFFF;
	--color-logo: #EAE0D2;
}