/* ==========================================================================
   TOKENS — Single source of truth for the design system.
   Calibrated to approved mockups (Apr 2026).
   ========================================================================== */

:root {

	/* --------------------------------------------------------------
	   COLOR — Brand (from approved mockups)
	   -------------------------------------------------------------- */

	/* Primary: navy — botones, headlines secundarios, CTA section */
	--apm-primary-50:  #F0F4FA;
	--apm-primary-100: #DCE5F2;
	--apm-primary-200: #B3C5E0;
	--apm-primary-300: #7B9BC8;
	--apm-primary-400: #4A73AC;
	--apm-primary-500: #1F3D75;
	--apm-primary-600: #14305E;
	--apm-primary-700: #0A1F44;   /* base navy de los botones del mockup */
	--apm-primary-800: #061633;
	--apm-primary-900: #030D1F;

	/* Accent: verde APM — pills, checks, métricas, hero del manual de marca */
	--apm-accent-50:  #E6FBF1;
	--apm-accent-100: #C2F5DB;
	--apm-accent-200: #87EBB7;
	--apm-accent-300: #4CE293;
	--apm-accent-400: #2BD680;
	--apm-accent-500: #14CC75;   /* verde APM base */
	--apm-accent-600: #0FB565;
	--apm-accent-700: #0A9A56;

	/* Highlight: azul — palabras destacadas ("sin atajos") */
	--apm-highlight-500: #2563EB;
	--apm-highlight-600: #1D4ED8;

	/* Danger: rojo — X de "lo que ya no funciona" */
	--apm-danger-500: #EF4444;
	--apm-danger-600: #DC2626;

	/* Neutrals (stone — cálido, no frío) */
	--apm-neutral-0:   #FFFFFF;
	--apm-neutral-50:  #FAFAF9;
	--apm-neutral-100: #F5F5F4;
	--apm-neutral-200: #E7E5E4;
	--apm-neutral-300: #D6D3D1;
	--apm-neutral-400: #A8A29E;
	--apm-neutral-500: #78716C;
	--apm-neutral-600: #57534E;
	--apm-neutral-700: #44403C;
	--apm-neutral-800: #292524;
	--apm-neutral-900: #1C1917;

	/* Feedback */
	--apm-success: var(--apm-accent-500);
	--apm-warning: #F59E0B;
	--apm-danger:  var(--apm-danger-500);
	--apm-info:    var(--apm-highlight-500);

	/* --------------------------------------------------------------
	   COLOR — Semantic (use these in components, not raw scales)
	   -------------------------------------------------------------- */

	--apm-color-bg:           var(--apm-neutral-0);
	--apm-color-bg-subtle:    var(--apm-neutral-50);
	--apm-color-bg-muted:     var(--apm-neutral-100);
	--apm-color-bg-inverse:   var(--apm-primary-700);   /* CTA navy section */
	--apm-color-bg-accent:    var(--apm-accent-500);

	--apm-color-text:         var(--apm-neutral-900);
	--apm-color-text-muted:   var(--apm-neutral-600);
	--apm-color-text-subtle:  var(--apm-neutral-500);
	--apm-color-text-inverse: var(--apm-neutral-0);
	--apm-color-text-accent:  var(--apm-accent-700);
	--apm-color-text-highlight: var(--apm-highlight-600);

	--apm-color-border:        var(--apm-neutral-200);
	--apm-color-border-strong: var(--apm-neutral-300);
	--apm-color-border-accent: var(--apm-accent-500);

	--apm-color-link:          var(--apm-primary-700);
	--apm-color-link-hover:    var(--apm-primary-800);

	--apm-color-btn-primary:       var(--apm-primary-700);
	--apm-color-btn-primary-hover: var(--apm-primary-800);

	/* --------------------------------------------------------------
	   TYPOGRAPHY — Montserrat (matches approved mockups)
	   -------------------------------------------------------------- */

	--apm-font-display: "Montserrat", system-ui, -apple-system, sans-serif;
	--apm-font-body:    "Montserrat", system-ui, -apple-system, sans-serif;
	--apm-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Type scale — modular, 1.250 (major third) */
	--apm-text-xs:   0.75rem;
	--apm-text-sm:   0.875rem;
	--apm-text-base: 1rem;
	--apm-text-lg:   1.125rem;
	--apm-text-xl:   1.25rem;
	--apm-text-2xl:  1.5rem;
	--apm-text-3xl:  1.875rem;
	--apm-text-4xl:  2.25rem;
	--apm-text-5xl:  3rem;
	--apm-text-6xl:  3.75rem;
	--apm-text-7xl:  4.5rem;

	/* Line heights */
	--apm-leading-tight:   1.15;
	--apm-leading-snug:    1.3;
	--apm-leading-normal:  1.55;
	--apm-leading-relaxed: 1.7;

	/* Font weights — Montserrat */
	--apm-weight-regular:   400;
	--apm-weight-medium:    500;
	--apm-weight-semibold:  600;
	--apm-weight-bold:      700;
	--apm-weight-extrabold: 800;   /* headlines tipo "Formación real en Paid Media" */

	/* Tracking */
	--apm-tracking-tighter: -0.03em;
	--apm-tracking-tight:   -0.02em;
	--apm-tracking-normal:  0;
	--apm-tracking-wide:    0.05em;

	/* --------------------------------------------------------------
	   SPACING — 4px baseline
	   -------------------------------------------------------------- */

	--apm-space-0:  0;
	--apm-space-1:  0.25rem;
	--apm-space-2:  0.5rem;
	--apm-space-3:  0.75rem;
	--apm-space-4:  1rem;
	--apm-space-5:  1.25rem;
	--apm-space-6:  1.5rem;
	--apm-space-8:  2rem;
	--apm-space-10: 2.5rem;
	--apm-space-12: 3rem;
	--apm-space-16: 4rem;
	--apm-space-20: 5rem;
	--apm-space-24: 6rem;
	--apm-space-32: 8rem;

	/* --------------------------------------------------------------
	   LAYOUT
	   -------------------------------------------------------------- */

	--apm-container-sm:  640px;
	--apm-container-md:  768px;
	--apm-container-lg:  1024px;
	--apm-container-xl:  1200px;
	--apm-container-2xl: 1400px;

	--apm-container-gutter: clamp(1rem, 3vw, 2rem);

	/* --------------------------------------------------------------
	   RADIUS, SHADOW, BORDER
	   -------------------------------------------------------------- */

	--apm-radius-xs:   2px;
	--apm-radius-sm:   4px;
	--apm-radius-md:   8px;
	--apm-radius-lg:   12px;
	--apm-radius-xl:   16px;
	--apm-radius-2xl:  24px;
	--apm-radius-full: 9999px;

	--apm-shadow-xs: 0 1px 2px rgba(10, 31, 68, 0.04);
	--apm-shadow-sm: 0 1px 3px rgba(10, 31, 68, 0.06), 0 1px 2px rgba(10, 31, 68, 0.04);
	--apm-shadow-md: 0 4px 8px rgba(10, 31, 68, 0.06), 0 2px 4px rgba(10, 31, 68, 0.04);
	--apm-shadow-lg: 0 12px 24px rgba(10, 31, 68, 0.08), 0 4px 8px rgba(10, 31, 68, 0.04);
	--apm-shadow-xl: 0 24px 48px rgba(10, 31, 68, 0.12), 0 8px 16px rgba(10, 31, 68, 0.06);

	--apm-border-width: 1px;

	/* --------------------------------------------------------------
	   MOTION
	   -------------------------------------------------------------- */

	--apm-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--apm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	--apm-duration-fast: 150ms;
	--apm-duration-base: 220ms;
	--apm-duration-slow: 400ms;

	/* --------------------------------------------------------------
	   Z-INDEX
	   -------------------------------------------------------------- */

	--apm-z-base:     1;
	--apm-z-dropdown: 100;
	--apm-z-sticky:   200;
	--apm-z-overlay:  900;
	--apm-z-modal:    1000;
	--apm-z-toast:    1100;
}