/**
 * Design tokens — Suzuki Motos / Auto Nica
 * -----------------------------------------------------------------------
 * Fuente única de verdad para colores, tipografía y espaciado del sitio.
 * El plugin de bloques reutiliza estos mismos nombres de variable.
 *
 * Tipografía: "Archivo" (títulos — Google Font más cercana al wordmark
 * Suzuki) + "Inter" (texto general).
 *
 * Paleta del logo real:
 *   Rojo emblema  #e60012  (primario / CTAs — rojo Suzuki oficial)
 *   Azul oficial  #003399  (dominante — fondos, header, secciones oscuras)
 *   Azul wordmark #265bc9  (acento, highlights, links)
 *   Azul profundo #002266  (sombras y profundidad en gradientes)
 *   Negro / blanco / humo para contraste.
 */

:root {
	/* -----------------------------------------------------------------
	   1) Paleta cruda de marca
	----------------------------------------------------------------- */
	--sm-color-carbon: #1f232b;
	--sm-color-carbon-dark: #0d0f13;
	--sm-color-steel: #4c5b6b;
	--sm-color-steel-light: #8b99a8;
	--sm-color-red: #e60012;
	--sm-color-red-dark: #c40010;
	--sm-color-blue: #265bc9;
	--sm-color-blue-dark: #1d47a0;
	--sm-color-navy: #003399;
	--sm-color-navy-deep: #002266;
	--sm-color-navy-mid: #003399;

	/* Alias de compatibilidad (antes ámbar; ahora azul Suzuki) */
	--sm-color-amber: var(--sm-color-blue);
	--sm-color-amber-dark: var(--sm-color-blue-dark);

	--sm-color-smoke: #f3f3f1;
	--sm-color-smoke-alt: #e7e6e2;
	--sm-color-white: #ffffff;
	--sm-color-ink: #15171c;

	/* -----------------------------------------------------------------
	   2) Roles semánticos
	----------------------------------------------------------------- */
	--sm-color-bg: var(--sm-color-white);
	--sm-color-bg-alt: var(--sm-color-smoke);
	--sm-color-bg-dark: var(--sm-color-navy);
	--sm-color-bg-white: var(--sm-color-white);

	--sm-color-text: var(--sm-color-ink);
	--sm-color-text-muted: rgb(21 23 28 / 68%);
	--sm-color-text-on-dark: var(--sm-color-white);
	--sm-color-text-on-dark-muted: rgb(255 255 255 / 68%);

	--sm-color-primary: var(--sm-color-red);
	--sm-color-primary-hover: var(--sm-color-red-dark);
	--sm-color-primary-soft: #ff1a2e;

	--sm-color-accent: var(--sm-color-blue);
	--sm-color-accent-hover: var(--sm-color-blue-dark);
	--sm-color-secondary: var(--sm-color-steel);
	--sm-color-secondary-light: var(--sm-color-steel-light);

	--sm-color-border: rgb(21 23 28 / 14%);
	--sm-color-border-on-dark: rgb(255 255 255 / 14%);

	/* -----------------------------------------------------------------
	   3) Tipografía
	----------------------------------------------------------------- */
	--sm-font-heading: "Archivo", "Arial Black", sans-serif;
	--sm-font-mono: "Archivo", sans-serif;
	--sm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--sm-font-size-eyebrow: 0.8125rem;
	--sm-font-size-sm: 0.9375rem;
	--sm-font-size-base: 1rem;
	--sm-font-size-lg: 1.25rem;
	--sm-font-size-xl: 1.75rem;
	--sm-font-size-2xl: clamp(2rem, 4vw, 2.75rem);
	--sm-font-size-3xl: clamp(2.5rem, 6vw, 4rem);

	--sm-letter-spacing-eyebrow: 0.14em;
	--sm-letter-spacing-heading: 0.02em;
	--sm-line-height-heading: 1.05;
	--sm-line-height-body: 1.6;

	/* -----------------------------------------------------------------
	   4) Espaciado
	----------------------------------------------------------------- */
	--sm-space-2xs: 6px;
	--sm-space-xs: 12px;
	--sm-space-sm: 18px;
	--sm-space-md: 28px;
	--sm-space-lg: 48px;
	--sm-space-xl: 56px;
	--sm-space-section: clamp(40px, 5vw, 64px);

	--sm-container-padding: clamp(20px, 5vw, 56px);
	--sm-container-max: 1280px;
	--sm-header-bar-height: 76px;
	--sm-header-height: calc(var(--sm-header-bar-height) + env(safe-area-inset-top, 0px));

	/* -----------------------------------------------------------------
	   5) Bordes, sombras, transiciones
	----------------------------------------------------------------- */
	--sm-radius-sm: 4px;
	--sm-radius-md: 8px;
	--sm-radius-lg: 16px;
	--sm-radius-xl: 24px;
	--sm-radius-pill: 999px;
	--sm-transition: 200ms ease;
	--sm-shadow-soft: 0 10px 26px rgb(13 15 19 / 18%);
	--sm-shadow-dark: 0 22px 48px rgb(0 0 0 / 45%);

	--sm-gradient-overlay-bottom: linear-gradient(180deg, rgb(0 51 153 / 0%) 0%, rgb(0 51 153 / 42%) 52%, rgb(0 51 153 / 88%) 100%);
	--sm-gradient-overlay-top: linear-gradient(0deg, rgb(0 51 153 / 0%) 0%, rgb(0 51 153 / 70%) 100%);
	--sm-gradient-speed: linear-gradient(135deg, rgb(38 91 201 / 55%) 0%, rgb(0 51 153 / 92%) 100%);
	--sm-gradient-carbon: linear-gradient(165deg, #003399 0%, #002266 55%, #001a4d 100%);
	--sm-gradient-navy: linear-gradient(165deg, #265bc9 0%, #003399 52%, #002266 100%);
	--sm-gradient-navy-soft: linear-gradient(180deg, #f3f6fd 0%, #ffffff 42%, #eef3fb 100%);
	--sm-shadow-blue: 0 24px 60px rgb(0 51 153 / 22%);

	--sm-image-filter: saturate(1.04) contrast(1.1) brightness(0.98);
}