/* ===========================================
   D&M Corredores de Seguros — Design Tokens
   Actualizado: estructura visual referencia
   =========================================== */
/* @font-face {
	font-family: 'lora';
	src: url('../fonts/lora.ttf') format('truetype');
} */
@font-face {
	font-family: 'lora';
	src: url('../fonts/LibreBaskerville.ttf') format('truetype');
}
@font-face {
	font-family: 'cabin';
	src: url('../fonts/cabin.ttf') format('truetype');
}

:root {
	/* ── COLORES DE MARCA ── */
	--dym-azul: #002362;
	--dym-azul-medio: #00639a;
	--dym-azul-oscuro: #001848;
	--dym-azul-cont: #00378f;
	--dym-celeste: #89e2ff;
	--dym-verde: #1f7f00;
	--dym-verde-oscuro: #186500;

	/* ── SURFACE / BACKGROUNDS (del sistema de color referencia) ── */
	--dym-bg: #faf8ff;
	--dym-surface: #faf8ff;
	--dym-surface-bright: #faf8ff;
	--dym-surface-low: #f4f3fb;
	--dym-surface-container: #eeedf5;
	--dym-surface-high: #e8e7ef;
	--dym-surface-highest: #e2e2ea;
	--dym-surface-lowest: #ffffff;

	/* ── TEXTO ── */
	--dym-on-bg: #1a1b21;
	--dym-on-surface: #1a1b21;
	--dym-on-surface-var: #434652;
	--dym-blanco: #ffffff;

	/* ── BORDES ── */
	--dym-outline: #747683;
	--dym-outline-var: #c4c6d4;

	/* ── SEMANTICOS ── */
	--dym-rojo: #ba1a1a;
	--dym-rojo-bg: #ffdad6;
	--dym-verde-bg: #d4f5c4;
	--dym-verde-label: #27500a;
	--dym-azul-bg: #dae2ff;

	/* ── TIPOGRAFIA ── */
	--dym-font-body: 'Lora', sans-serif;
	--dym-font-display: 'cabin', serif;

	/* ── ESCALA DE TEXTO ── */
	--dym-text-body-sm: 12px;
	--dym-text-body-md: 16px;
	--dym-text-body-lg: 18px;
	--dym-text-title-lg: 20px;
	--dym-text-head-sm: 24px;
	--dym-text-head-md: 32px;
	--dym-text-display: 48px;

	/* ── BORDER RADIUS ── */
	--dym-radius-sm: 8px;
	--dym-radius-md: 16px;
	--dym-radius-lg: 32px;
	--dym-radius-pill: 9999px;

	/* ── SOMBRAS ── */
	--dym-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
	--dym-shadow-md: 0 4px 20px rgba(0, 55, 143, 0.08);
	--dym-shadow-lg: 0 16px 48px rgba(0, 35, 98, 0.16);

	/* ── ESPACIADO ── */
	--dym-gutter: 24px;
	--dym-section-gap: 56px;
	--dym-margin-mob: 16px;
	--dym-margin-desk: 24px;
	--dym-max-width: 1248px;
	--dym-nav-height: 72px;

	/* ── MOTION ── */
	--dym-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--dym-dur-fast: 120ms;
	--dym-dur-base: 200ms;
	--dym-dur-slow: 700ms;

	/* ── ALIASES compatibilidad ── */
	--azul: var(--dym-azul);
	--azul-medio: var(--dym-azul-medio);
	--verde: var(--dym-verde);
	--celeste: var(--dym-celeste);
	--gris-bg: var(--dym-surface-low);
	--gris-borde: var(--dym-outline-var);
	--gris-texto: var(--dym-on-surface-var);
	--rojo: var(--dym-rojo);
}

/* ── ALIASES Y VARIABLES LEGACY (admin.css, seguro.css los necesitan) ── */
:root {
	--dym-blanco: #ffffff;
	--dym-negro-suave: #1a1b21;
	--dym-gris-bg: var(--dym-surface-low);
	--dym-gris-card: var(--dym-surface-container);
	--dym-gris-linea: var(--dym-outline-var);
	--dym-gris-claro: var(--dym-surface-high);
	--dym-gris-texto: var(--dym-on-surface-var);
	--dym-gris-medio: #666;
	--dym-gris-oscuro: #555;
	--dym-gris-400: #999;
	--dym-gris-300: #aaa;
	--dym-gris-200: #777;
	--dym-gris-badge: #f1f0f0;
	--dym-gris-badge-tx: #5f5e5a;
	--dym-texto-suave: #444;
	--dym-azul-bg: #dae2ff;
	--dym-azul-oscuro: #001848;
	--dym-verde-bg: #eaf3de;
	--dym-verde-oscuro: #186500;
	--dym-verde-label: #27500a;
	--dym-rojo-bg: #ffdad6;
	--dym-rojo-texto: #ffd6d6;
	--dym-rojo-borde: #f5c4b3;

	/* Aliases cortos para admin.css */
	--azul: var(--dym-azul);
	--azul-medio: var(--dym-azul-medio);
	--verde: var(--dym-verde);
	--celeste: var(--dym-celeste);
	--rojo: var(--dym-rojo);
	--gris-bg: var(--dym-surface-low);
	--gris-borde: var(--dym-outline-var);
	--gris-texto: var(--dym-on-surface-var);

	/* Layout del admin drawer */
	--drawer-width: 230px;
	--header-height: 56px;
	--dym-drawer-width: 230px;
	--dym-header-height: 56px;

	/* Border radius legacy */
	--dym-radius-sm: 8px;
	--dym-radius-md: 16px;
	--dym-radius-lg: 32px;
	--dym-radius-pill: 9999px;
}