/* ============================================================
 * Urra Core — Design System tokens
 * ------------------------------------------------------------
 * Define colores y tipografía como CSS custom properties en
 * `:root` para que estén disponibles en frontend, editor de
 * Elementor, preview y block editor.
 *
 * Los nombres `--e-global-color-*` son la convención que usa
 * Elementor para sus "Global Colors": al definirlos aquí
 * sobreescriben los del kit del sitio y aparecen automáticamente
 * en el panel del editor.
 *
 * Los nombres `--urra-*` son tokens internos del plugin
 * (tipografía, escalas) que todos los módulos consumen vía
 * fallback en sus propias variables locales `--urra-{modulo}-*`
 * o `--uc-{modulo}-*`.
 * ============================================================ */

:root {
	/* ── System colors (alias para compatibilidad Elementor) ──── */
	--e-global-color-primary:   #3399CC; /* Azul Urrá */
	--e-global-color-secondary: #009966; /* Verde Urrá */
	--e-global-color-text:      #1F2937;
	--e-global-color-accent:    #999966; /* Caqui Tierra */

	/* ── Escala Blue (50 → 950) ──────────────────────────────── */
	--e-global-color-blue-50:  #E6F3FA;
	--e-global-color-blue-100: #CCE7F5;
	--e-global-color-blue-200: #99CFEB;
	--e-global-color-blue-300: #66B7E0;
	--e-global-color-blue-400: #4DA9DA;
	--e-global-color-blue-500: #3399CC;
	--e-global-color-blue-600: #2A7AA6;
	--e-global-color-blue-700: #205C7D;
	--e-global-color-blue-800: #153D53;
	--e-global-color-blue-900: #0B1F2A;
	--e-global-color-blue-950: #050F15;

	/* ── Escala Green (50 → 950) ─────────────────────────────── */
	--e-global-color-green-50:  #E6F5EF;
	--e-global-color-green-100: #CCEBDF;
	--e-global-color-green-200: #99D7BE;
	--e-global-color-green-300: #66C39E;
	--e-global-color-green-400: #33AF7D;
	--e-global-color-green-500: #009966;
	--e-global-color-green-600: #007A52;
	--e-global-color-green-700: #005C3D;
	--e-global-color-green-800: #003D29;
	--e-global-color-green-900: #001F14;
	--e-global-color-green-950: #000F0A;

	/* ── Escala Khaki (50 → 950) ─────────────────────────────── */
	--e-global-color-khaki-50:  #F2F1E8;
	--e-global-color-khaki-100: #E5E3D2;
	--e-global-color-khaki-200: #CCC7A5;
	--e-global-color-khaki-300: #B2AB78;
	--e-global-color-khaki-400: #A6A06D;
	--e-global-color-khaki-500: #999966;
	--e-global-color-khaki-600: #7A7A52;
	--e-global-color-khaki-700: #5C5C3D;
	--e-global-color-khaki-800: #3D3D29;
	--e-global-color-khaki-900: #1F1F14;
	--e-global-color-khaki-950: #0F0F0A;

	/* ── Escala Neutral (50 → 950) ───────────────────────────── */
	--e-global-color-neutral-50:  #F9FAFB;
	--e-global-color-neutral-100: #F3F4F6;
	--e-global-color-neutral-200: #E5E7EB;
	--e-global-color-neutral-300: #D1D5DB;
	--e-global-color-neutral-400: #9CA3AF;
	--e-global-color-neutral-500: #6B7280;
	--e-global-color-neutral-600: #4B5563;
	--e-global-color-neutral-700: #374151;
	--e-global-color-neutral-800: #1F2937;
	--e-global-color-neutral-900: #111827;
	--e-global-color-neutral-950: #030712;

	/* ── Tipografía: familias ────────────────────────────────── */
	--urra-font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--urra-font-body:    "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* ── Tipografía: escala de headings (Poppins) ────────────── */
	--urra-h1-size:   56px;
	--urra-h1-lh:     64px;
	--urra-h1-weight: 700;

	--urra-h2-size:   44px;
	--urra-h2-lh:     52px;
	--urra-h2-weight: 700;

	--urra-h3-size:   36px;
	--urra-h3-lh:     44px;
	--urra-h3-weight: 700;

	--urra-h4-size:   28px;
	--urra-h4-lh:     36px;
	--urra-h4-weight: 600;

	--urra-h5-size:   22px;
	--urra-h5-lh:     30px;
	--urra-h5-weight: 600;

	--urra-h6-size:   18px;
	--urra-h6-lh:     26px;
	--urra-h6-weight: 600;

	/* ── Tipografía: escala body (Google Sans) ───────────────── */
	--urra-body-xl-size: 20px;
	--urra-body-xl-lh:   30px;

	--urra-body-l-size:  18px;
	--urra-body-l-lh:    28px;

	--urra-body-m-size:  16px;
	--urra-body-m-lh:    24px;

	--urra-body-s-size:  14px;
	--urra-body-s-lh:    20px;

	--urra-body-xs-size: 12px;
	--urra-body-xs-lh:   18px;
}