/**
 * Ultra Desnivel — variables.css
 * Tokens globales de diseño. Se mantienen sincronizados con theme.json para
 * que el editor de bloques y el front-end compartan la misma paleta y escala.
 */

:root {
	/* ---- Color: estructura ---- */
	--ud-color-primary: #1a1a1a;      /* grafito */
	--ud-color-secondary: #3d4a3d;    /* verde bosque profundo */
	--ud-color-accent: #2f7d4f;       /* verde montaña (CTA) */
	--ud-color-accent-dark: #245f3c;  /* hover de CTA */
	--ud-color-background: #ffffff;
	--ud-color-surface: #f4f5f3;      /* fondo secundario */
	--ud-color-surface-alt: #eceee9;
	--ud-color-text: #1a1a1a;
	--ud-color-muted: #5c645c;        /* texto secundario */
	--ud-color-border: #dcdfd9;

	/* ---- Color: feedback / comercial ---- */
	--ud-color-promo: #c2410c;        /* ofertas / promociones */
	--ud-color-success: #2f7d4f;
	--ud-color-warning: #b45309;
	--ud-color-error: #b91c1c;

	/* Derivados translúcidos */
	--ud-overlay: rgba(20, 22, 20, 0.46);
	--ud-shadow-color: 20, 26, 20;

	/* ---- Tipografía ---- */
	--ud-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	--ud-font-heading: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
	--ud-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--ud-fs-small: 0.875rem;
	--ud-fs-base: 1rem;
	--ud-fs-large: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--ud-fs-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	--ud-fs-xxl: clamp(2rem, 1.5rem + 2.6vw, 3.5rem);

	--ud-lh-tight: 1.1;
	--ud-lh-snug: 1.3;
	--ud-lh-base: 1.6;

	--ud-tracking-eyebrow: 0.14em;  /* etiquetas técnicas en mayúsculas */
	--ud-weight-heading: 700;
	--ud-weight-bold: 600;

	/* ---- Espaciado (escala theme.json 20–70) ---- */
	--ud-space-20: 0.5rem;
	--ud-space-30: 1rem;
	--ud-space-40: 1.5rem;
	--ud-space-50: 2.5rem;
	--ud-space-60: 4rem;
	--ud-space-70: 6rem;

	/* ---- Layout ---- */
	--ud-content: 720px;
	--ud-wide: 1280px;
	--ud-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

	/* ---- Bordes y radios ---- */
	--ud-radius-sm: 6px;
	--ud-radius: 10px;
	--ud-radius-lg: 16px;
	--ud-radius-pill: 999px;
	--ud-border: 1px solid var(--ud-color-border);

	/* ---- Sombras (discretas) ---- */
	--ud-shadow-sm: 0 1px 2px rgba(var(--ud-shadow-color), 0.06);
	--ud-shadow: 0 6px 20px rgba(var(--ud-shadow-color), 0.08);
	--ud-shadow-lg: 0 18px 50px rgba(var(--ud-shadow-color), 0.16);

	/* ---- Motion ---- */
	--ud-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ud-dur: 0.22s;

	/* ---- UI específicos ---- */
	--ud-header-h: 72px;
	--ud-topbar-h: 38px;
	--ud-z-header: 100;
	--ud-z-drawer: 200;
	--ud-z-modal: 300;
}

/* Mapeo a los prefijos de variable que genera theme.json (--wp--preset--*),
   por si algún bloque los referencia directamente. No es estrictamente
   necesario, pero garantiza coherencia visual entre editor y front. */
:root {
	--ud-cta-fg: #ffffff;
}