/**
 * Design tokens — Báez Cortes (rediseño v2)
 * Paleta Instagram + sistema de elevación + glass.
 */

:root {
	/* Marca cruda */
	--bc-color-teal-900: #003344;
	--bc-color-teal-850: #00394d;
	--bc-color-teal-800: #003847;
	--bc-color-teal-500: #007392;
	--bc-color-teal-400: #008fad;
	--bc-color-teal-300: #4da8bd;
	--bc-color-black: #0a0f12;
	--bc-color-white: #ffffff;
	--bc-color-mist: #f4f8f9;
	--bc-color-cloud: #e8f0f2;

	/* Roles semánticos */
	--bc-color-bg: var(--bc-color-white);
	--bc-color-bg-alt: var(--bc-color-mist);
	--bc-color-bg-muted: var(--bc-color-cloud);
	--bc-color-bg-dark: var(--bc-color-teal-900);
	--bc-color-bg-white: var(--bc-color-white);

	--bc-color-text: var(--bc-color-teal-900);
	--bc-color-text-muted: rgb(0 51 68 / 68%);
	--bc-color-text-on-dark: var(--bc-color-white);
	--bc-color-text-on-dark-muted: rgb(255 255 255 / 72%);

	--bc-color-primary: var(--bc-color-teal-900);
	--bc-color-primary-hover: var(--bc-color-teal-800);
	--bc-color-primary-soft: var(--bc-color-teal-500);
	--bc-color-accent: var(--bc-color-teal-500);
	--bc-color-accent-hover: #005f78;
	--bc-color-secondary: var(--bc-color-teal-300);

	--bc-color-border: rgb(0 51 68 / 10%);
	--bc-color-border-on-dark: rgb(255 255 255 / 14%);
	--bc-color-border-accent: rgb(0 115 146 / 35%);

	/* Aliases legacy (compatibilidad bloques) */
	--bc-color-navy: var(--bc-color-teal-900);
	--bc-color-navy-light: var(--bc-color-teal-800);
	--bc-color-navy-dark: var(--bc-color-teal-850);
	--bc-color-gold: var(--bc-color-teal-500);
	--bc-color-gold-dark: var(--bc-color-accent-hover);
	--bc-color-slate: var(--bc-color-teal-300);
	--bc-color-ink: var(--bc-color-teal-900);
	--bc-color-ink-soft: var(--bc-color-text-muted);
	--bc-color-ivory: var(--bc-color-white);
	--bc-color-stone: var(--bc-color-mist);

	/* Tipografía — Albert Sans (geométrica ligeramente más redondeada que Outfit) */
	--bc-font-heading: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bc-font-body: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bc-font-weight-light: 300;
	--bc-font-weight-regular: 400;
	--bc-font-weight-semibold: 600;
	--bc-font-weight-bold: 700;

	--bc-font-size-eyebrow: 0.75rem;
	--bc-font-size-sm: 0.9375rem;
	--bc-font-size-base: 1rem;
	--bc-font-size-lg: 1.125rem;
	--bc-font-size-xl: 1.5rem;
	--bc-font-size-2xl: clamp(1.75rem, 3.5vw, 2.5rem);
	--bc-font-size-3xl: clamp(2.25rem, 5vw, 3.25rem);
	--bc-font-size-hero: clamp(2.5rem, 6vw, 3.75rem);

	--bc-letter-spacing-eyebrow: 0.14em;
	--bc-letter-spacing-wordmark: 0.14em;
	--bc-letter-spacing-heading: -0.01em;
	--bc-line-height-heading: 1.12;
	--bc-line-height-body: 1.65;

	/* Espaciado */
	--bc-space-2xs: 8px;
	--bc-space-xs: 12px;
	--bc-space-sm: 20px;
	--bc-space-md: 32px;
	--bc-space-lg: 56px;
	--bc-space-xl: 72px;
	--bc-space-2xl: 128px;

	--bc-container-padding: clamp(20px, 5vw, 64px);
	--bc-container-max: 1280px;
	--bc-header-offset: 80px;

	/* Forma — bordes suaves (no pills salvo badges) */
	--bc-radius-sm: 2px;
	--bc-radius-md: 6px;
	--bc-radius-lg: 10px;
	--bc-radius-xl: 12px;
	--bc-radius-pill: 999px;

	/* Motion */
	--bc-transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
	--bc-transition-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);

	/* Elevación */
	--bc-elev-1: 0 2px 8px rgb(0 51 68 / 6%);
	--bc-elev-2: 0 8px 24px rgb(0 51 68 / 10%);
	--bc-elev-3: 0 16px 40px rgb(0 51 68 / 14%);
	--bc-elev-4: 0 24px 56px rgb(0 51 68 / 18%);
	--bc-shadow-soft: var(--bc-elev-2);
	--bc-shadow-dark: var(--bc-elev-4);

	/* Glass */
	--bc-glass-bg: rgb(255 255 255 / 10%);
	--bc-glass-bg-strong: rgb(255 255 255 / 16%);
	--bc-glass-bg-light: rgb(255 255 255 / 72%);
	--bc-glass-border: rgb(255 255 255 / 16%);
	--bc-glass-border-light: rgb(0 51 68 / 8%);
	--bc-glass-blur: 16px;
	--bc-glass-blur-strong: 24px;

	/* Gradientes */
	--bc-gradient-brand: linear-gradient(135deg, #003344 0%, #003847 50%, #00394d 100%);
	--bc-gradient-brand-deep: linear-gradient(180deg, #003344 0%, #002833 100%);
	--bc-gradient-accent: linear-gradient(135deg, #007392 0%, #003847 100%);
	--bc-gradient-overlay-bottom: linear-gradient(180deg, rgb(0 51 68 / 0%) 0%, rgb(0 51 68 / 55%) 55%, rgb(0 51 68 / 92%) 100%);
	--bc-gradient-overlay-top: linear-gradient(0deg, rgb(0 51 68 / 0%) 0%, rgb(0 51 68 / 70%) 100%);
	--bc-gradient-navy-deep: var(--bc-gradient-brand-deep);

	--bc-image-filter: saturate(0.92) contrast(1.05);

	/* Logo wordmark (#16789a) → blanco en header/footer oscuros */
	--bc-logo-source: #16789a;
	--bc-logo-filter-on-dark: brightness(0) invert(1);
}