/**
 * Despacho Theme — Design Tokens
 * =============================================================================
 * Único lugar donde se definen colores, tipografía, espaciados y radios.
 * Todo el CSS de componentes consume estas variables (--ddk-*).
 *
 * Los tokens de MARCA (color primary/secondary/accent y tipografías) se
 * SOBRESCRIBEN en tiempo de ejecución por inc/brand.php, que imprime un
 * bloque :root con los valores elegidos por la abogada en el Customizer.
 *
 * Cambiar la marca = cambiar estas variables. Nunca se tocan los componentes.
 * =============================================================================
 */

:root {
	/* -------------------------------------------------------------------------
	 * COLOR — MARCA (defaults; sobrescribibles por el Customizer)
	 * Paleta por defecto: azul jurídico profundo + acento dorado sobrio.
	 * ---------------------------------------------------------------------- */
	--ddk-color-primary: #15233c;          /* Azul noche profundo (secciones oscuras). */
	--ddk-color-primary-dark: #0e1a2e;     /* Hover/oscuro. */
	--ddk-color-primary-contrast: #ffffff; /* Texto sobre primary. */
	--ddk-color-secondary: #35507e;        /* Azul de apoyo. */
	--ddk-color-accent: #c8a24c;           /* Dorado (acento premium). */
	--ddk-color-accent-contrast: #15233c;

	/* -------------------------------------------------------------------------
	 * COLOR — NEUTROS (escala de grises)
	 * ---------------------------------------------------------------------- */
	--ddk-gray-50:  #f7f8fa;
	--ddk-gray-100: #eef1f5;
	--ddk-gray-200: #e0e4ea;
	--ddk-gray-300: #c8cfda;
	--ddk-gray-400: #9aa4b4;
	--ddk-gray-500: #6b7688;
	--ddk-gray-600: #4d5666;
	--ddk-gray-700: #363e4c;
	--ddk-gray-800: #222833;
	--ddk-gray-900: #12151c;

	/* -------------------------------------------------------------------------
	 * COLOR — SEMÁNTICO (superficies, texto, estados)
	 * ---------------------------------------------------------------------- */
	--ddk-color-bg: #f5f3ef;               /* Fondo cálido de página (crema). */
	--ddk-color-surface: #ffffff;          /* Tarjetas/paneles claros. */
	--ddk-color-surface-alt: #efeae1;      /* Superficie alternativa cálida. */
	--ddk-color-text: var(--ddk-gray-800);
	--ddk-color-text-muted: var(--ddk-gray-500);
	--ddk-color-heading: var(--ddk-color-primary);
	--ddk-color-border: var(--ddk-gray-200);

	--ddk-color-success: #2e7d5b;
	--ddk-color-warning: #b5842b;
	--ddk-color-danger:  #b23b3b;
	--ddk-color-info:    var(--ddk-color-secondary);

	/* -------------------------------------------------------------------------
	 * TIPOGRAFÍA — MARCA (defaults; sobrescribibles por el Customizer)
	 * ---------------------------------------------------------------------- */
	--ddk-font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ddk-font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--ddk-font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', Consolas, monospace;

	/* Escala tipográfica (base 1rem, ratio ~1.25). */
	--ddk-text-xs:   0.75rem;
	--ddk-text-sm:   0.875rem;
	--ddk-text-base: 1rem;
	--ddk-text-lg:   1.125rem;
	--ddk-text-xl:   1.5rem;
	--ddk-text-2xl:  2rem;
	--ddk-text-3xl:  2.5rem;
	--ddk-text-4xl:  3.25rem;

	/* Pesos e interlineado. */
	--ddk-weight-regular: 400;
	--ddk-weight-medium: 500;
	--ddk-weight-semibold: 600;
	--ddk-weight-bold: 700;
	--ddk-leading-tight: 1.15;
	--ddk-leading-snug: 1.35;
	--ddk-leading-normal: 1.6;

	/* -------------------------------------------------------------------------
	 * ESPACIADO (escala base 4px / 0.25rem)
	 * ---------------------------------------------------------------------- */
	--ddk-space-0: 0;
	--ddk-space-1: 0.25rem;
	--ddk-space-2: 0.5rem;
	--ddk-space-3: 0.75rem;
	--ddk-space-4: 1rem;
	--ddk-space-5: 1.25rem;
	--ddk-space-6: 1.5rem;
	--ddk-space-8: 2rem;
	--ddk-space-10: 2.5rem;
	--ddk-space-12: 3rem;
	--ddk-space-16: 4rem;
	--ddk-space-20: 5rem;
	--ddk-space-24: 6rem;

	/* -------------------------------------------------------------------------
	 * RADIOS, SOMBRAS, BORDES
	 * ---------------------------------------------------------------------- */
	--ddk-radius-sm: 6px;
	--ddk-radius-md: 10px;
	--ddk-radius-lg: 20px;
	--ddk-radius-xl: 30px;
	--ddk-radius-full: 9999px;
	--ddk-border-width: 1px;

	--ddk-shadow-sm: 0 1px 2px rgba(18, 21, 28, 0.06), 0 1px 3px rgba(18, 21, 28, 0.08);
	--ddk-shadow-md: 0 4px 12px rgba(18, 21, 28, 0.10);
	--ddk-shadow-lg: 0 12px 32px rgba(18, 21, 28, 0.16);

	/* -------------------------------------------------------------------------
	 * LAYOUT
	 * ---------------------------------------------------------------------- */
	--ddk-container-max: 1320px;
	--ddk-container-narrow: 760px;
	--ddk-gutter: clamp(1rem, 5vw, 2.5rem);

	/* -------------------------------------------------------------------------
	 * MOTION
	 * ---------------------------------------------------------------------- */
	--ddk-transition-fast: 150ms ease-out;
	--ddk-transition-base: 250ms ease-out;

	/* Altura de la barra, para offsets de scroll. */
	--ddk-header-height: 76px;
}

/* Respeta la preferencia de reducir movimiento. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}