/**
 * Design tokens — Legacy Custom Roofs & Exteriors
 * -----------------------------------------------------------------------
 * Fuente única de verdad para color, tipografía y espaciado.
 * El plugin legacy-custom-blocks reutiliza estos mismos nombres
 * (--lc-*). Si cambias un valor aquí, header, footer y bloques
 * lo heredan.
 *
 * Tipografía: Cinzel (títulos y wordmark; equivalente abierto de las
 * capitales romanas del logo, estilo Trajan) y Source Sans 3 (texto).
 * Paleta: azul #22529c como color principal, con tinta #173241,
 * acentos #406b8b y #40769d, blanco y negro.
 */

:root {
	/* -----------------------------------------------------------------
	   1) Paleta cruda
	----------------------------------------------------------------- */
	--lc-blue: #22529c;
	--lc-blue-hover: #1a417c;
	--lc-blue-deep: #16365f;
	--lc-slate: #40769d;
	--lc-steel: #406b8b;
	--lc-navy: #173241;
	--lc-white: #ffffff;
	--lc-black: #12161a;

	/* Azul principal en opacidades: velos, bordes, focos, fondos suaves */
	--lc-blue-08: rgb(34 82 156 / 8%);
	--lc-blue-14: rgb(34 82 156 / 14%);
	--lc-blue-22: rgb(34 82 156 / 22%);
	--lc-blue-40: rgb(34 82 156 / 40%);

	/* Superficies frías derivadas del azul (no son colores nuevos de marca) */
	--lc-paper: #f4f7fb;
	--lc-paper-alt: #e7eef5;
	--lc-mist: #d5e2f0;

	/* Texto secundario. #3d4c58 sobre blanco ≈ 8.8:1 */
	--lc-charcoal: #3d4c58;

	/* -----------------------------------------------------------------
	   2) Roles. Usar estos, no el hex suelto.
	----------------------------------------------------------------- */
	--lc-color-bg: var(--lc-paper);
	--lc-color-bg-alt: var(--lc-paper-alt);
	--lc-color-bg-dark: var(--lc-navy);
	--lc-color-bg-white: var(--lc-white);

	--lc-color-text: var(--lc-black);
	--lc-color-text-muted: var(--lc-charcoal);
	--lc-color-text-on-dark: var(--lc-white);
	--lc-color-text-on-dark-muted: rgb(255 255 255 / 78%);

	--lc-color-primary: var(--lc-blue);
	--lc-color-primary-hover: var(--lc-blue-hover);
	--lc-color-primary-soft: var(--lc-mist);

	/* Acero: texto de apoyo y botones sobre fondo claro (blanco encima ≈ 5.7:1).
	   Pizarra: rellenos y adornos. No usar ni acero ni pizarra como texto
	   sobre #22529c o #173241: el contraste no alcanza. */
	--lc-color-accent: var(--lc-steel);
	--lc-color-accent-soft: var(--lc-slate);
	--lc-color-ink: var(--lc-navy);

	--lc-color-border: rgb(23 50 65 / 14%);
	--lc-color-border-strong: rgb(34 82 156 / 28%);
	--lc-color-border-on-dark: rgb(255 255 255 / 18%);

	/* -----------------------------------------------------------------
	   3) Tipografía
	----------------------------------------------------------------- */
	--lc-font-heading: "Legacy Display", "Cinzel", "Palatino Linotype", Palatino, "Times New Roman", serif;
	--lc-font-body: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;

	--lc-font-size-eyebrow: 0.75rem;
	--lc-font-size-sm: 0.9375rem;
	--lc-font-size-base: 1.0625rem;
	--lc-font-size-lg: 1.25rem;
	--lc-font-size-xl: 1.625rem;
	--lc-font-size-2xl: clamp(2rem, 3.4vw, 2.75rem);
	--lc-font-size-3xl: clamp(2.45rem, 5vw, 3.6rem);

	--lc-letter-spacing-eyebrow: 0.22em;
	--lc-letter-spacing-heading: 0.06em;
	--lc-line-height-heading: 1.12;
	--lc-line-height-body: 1.65;

	/* -----------------------------------------------------------------
	   4) Espaciado
	----------------------------------------------------------------- */
	--lc-space-2xs: 4px;
	--lc-space-xs: 8px;
	--lc-space-sm: 16px;
	--lc-space-md: 24px;
	--lc-space-lg: 40px;
	--lc-space-xl: 72px;
	--lc-space-2xl: 112px;

	--lc-container-padding: clamp(20px, 4vw, 48px);
	--lc-container-max: 1180px;
	--lc-header-height: 88px;

	/* -----------------------------------------------------------------
	   5) Forma, sombra, movimiento
	----------------------------------------------------------------- */
	--lc-radius-sm: 2px;
	--lc-radius-md: 4px;
	--lc-transition: 180ms ease;
	--lc-shadow: 0 16px 40px rgb(23 50 65 / 12%);
	--lc-shadow-card: 0 2px 6px rgb(23 50 65 / 6%), 0 16px 40px rgb(23 50 65 / 14%), 0 0 0 1px rgb(23 50 65 / 14%);
	--lc-shadow-card-hover: 0 6px 16px rgb(23 50 65 / 10%), 0 28px 64px rgb(23 50 65 / 22%), 0 0 0 1px rgb(34 82 156 / 12%);
	--lc-shadow-lifted: 0 12px 28px rgb(18 22 26 / 18%), 0 32px 72px rgb(23 50 65 / 20%);
	--lc-shadow-header: 0 8px 24px rgb(23 50 65 / 18%);

	--lc-gradient-brand: linear-gradient(165deg, #22529c 0%, #173241 100%);
	--lc-gradient-overlay: linear-gradient(180deg, rgb(23 50 65 / 8%) 0%, rgb(23 50 65 / 78%) 100%);
}