/* ==========================================================================
   MOVEMOS PAÍS — DESIGN TOKENS
   --------------------------------------------------------------------------
   Sistema de diseño base. Toda variable de marca, tipografía, espaciado,
   color, radios y sombras vive aquí. Cualquier otro CSS del sitio debe
   consumir estas variables, NUNCA valores hard-coded.

   Convención de nombres:
   --color-*       Color (token semántico)
   --brand-*       Color de marca (token primitivo)
   --font-*        Familia tipográfica
   --text-*        Tamaño / line-height
   --weight-*      Peso tipográfico
   --space-*       Espaciado (escala 4 px)
   --radius-*      Border radius
   --shadow-*      Box shadow
   --layer-*       z-index
   --container-*   Anchos máximos
   --bp-*          Breakpoints (referencia, no se pueden usar en @media)

   Versión: 1.0.0 (Fase 1)
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     1. COLORES DE MARCA (primitivos — NO usar directamente en componentes)
     -------------------------------------------------------------------------- */
  --brand-azul-institucional: #072551;   /* Manual de marca */
  --brand-azul-dinamico:      #3167AB;   /* Manual de marca */
  --brand-amarillo-impulso:   #F6C20F;   /* Manual de marca */
  --brand-rojo-accion:        #CE1011;   /* Manual de marca */
  --brand-gris-apoyo:         #9399B1;   /* Manual de marca */

  /* Variantes derivadas para gradientes y estados */
  --brand-azul-900: #051a3b;
  --brand-azul-800: #072551;             /* = institucional */
  --brand-azul-700: #0a2d5e;             /* gradiente Observatorio/Propuestas */
  --brand-azul-600: #0f3d7a;             /* gradiente Observatorio/Propuestas */
  --brand-azul-500: #3167AB;             /* = dinámico */
  --brand-azul-400: #5a89c4;
  --brand-azul-100: #e6edf6;
  --brand-azul-50:  #f3f6fb;

  --brand-amarillo-700: #c89a0c;
  --brand-amarillo-600: #e5b30d;
  --brand-amarillo-500: #F6C20F;
  --brand-amarillo-100: #fef3cd;

  --brand-rojo-700: #a30d0e;
  --brand-rojo-500: #CE1011;
  --brand-rojo-100: #fbd7d8;

  /* Neutrales (base de grises) */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f8fa;                /* fondo suave (= --bg del v3) */
  --neutral-100: #eef0f4;
  --neutral-200: #dfe2ea;
  --neutral-300: #c4c8d4;
  --neutral-400: #9399B1;                /* = gris apoyo */
  --neutral-500: #6c7186;
  --neutral-600: #5a5e6a;                /* texto secundario */
  --neutral-700: #3f4252;
  --neutral-800: #2a2c36;
  --neutral-900: #1a1c1c;                /* texto primario */

  /* --------------------------------------------------------------------------
     2. COLORES SEMÁNTICOS (USAR ESTOS en componentes)
     -------------------------------------------------------------------------- */
  /* Texto */
  --color-text-primary:        var(--neutral-900);
  --color-text-secondary:      var(--neutral-600);
  --color-text-muted:          var(--neutral-500);
  --color-text-on-brand:       var(--neutral-0);
  --color-text-on-dark:        var(--neutral-0);
  --color-text-on-dark-muted:  rgba(255, 255, 255, 0.72);   /* AA-safe sobre azul-700+ */
  --color-text-link:           var(--brand-azul-500);
  --color-text-link-hover:     var(--brand-azul-700);
  --color-text-accent:         var(--brand-amarillo-500);

  /* Fondos / superficies */
  --color-surface-page:        var(--neutral-0);
  --color-surface-subtle:      var(--neutral-50);
  --color-surface-raised:      var(--neutral-0);
  --color-surface-inverse:     var(--brand-azul-800);
  --color-surface-inverse-soft: var(--brand-azul-700);

  /* Bordes */
  --color-border-subtle:       var(--neutral-200);
  --color-border-default:      var(--neutral-300);
  --color-border-strong:       var(--brand-azul-800);
  --color-border-on-dark:      rgba(255, 255, 255, 0.16);
  --color-border-focus:        var(--brand-amarillo-500);

  /* Acción / estados */
  --color-action-primary:      var(--brand-azul-800);
  --color-action-primary-hover: var(--brand-azul-700);
  --color-action-accent:       var(--brand-amarillo-500);
  --color-action-accent-hover: var(--brand-amarillo-600);
  --color-action-danger:       var(--brand-rojo-500);

  /* Feedback */
  --color-feedback-info:       var(--brand-azul-500);
  --color-feedback-warning:    var(--brand-amarillo-500);
  --color-feedback-error:      var(--brand-rojo-500);
  --color-feedback-success:    #1a8a4a;

  /* --------------------------------------------------------------------------
     3. TIPOGRAFÍA
     -------------------------------------------------------------------------- */
  /* Familias (siguen Manual de marca) */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Pesos */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;
  --weight-black:    900;

  /* Escala tipográfica (ratio 1.250 — Major Third, base 16 px) */
  --text-3xs:  0.75rem;   /* 12 px — caption mínima */
  --text-2xs:  0.8125rem; /* 13 px — caption */
  --text-xs:   0.875rem;  /* 14 px — small / metadata */
  --text-sm:   0.9375rem; /* 15 px — texto secundario */
  --text-base: 1rem;      /* 16 px — cuerpo */
  --text-md:   1.125rem;  /* 18 px — cuerpo grande / lead */
  --text-lg:   1.25rem;   /* 20 px — H4 */
  --text-xl:   1.5rem;    /* 24 px — H3 */
  --text-2xl:  1.875rem;  /* 30 px — H2 mobile */
  --text-3xl:  2.25rem;   /* 36 px — H2 desktop */
  --text-4xl:  2.75rem;   /* 44 px — H1 mobile */
  --text-5xl:  3.5rem;    /* 56 px — H1 desktop */
  --text-6xl:  4.5rem;    /* 72 px — Hero display */
  --text-7xl:  5.5rem;    /* 88 px — Hero display XL */

  /* Line-heights */
  --leading-tight:   1.1;    /* display */
  --leading-snug:    1.25;   /* H1, H2 */
  --leading-normal:  1.5;    /* cuerpo */
  --leading-relaxed: 1.7;    /* cuerpo largo */
  --leading-loose:   1.85;   /* lectura prolongada */

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.06em;
  --tracking-widest: 0.1em;  /* eyebrow / kicker */

  /* --------------------------------------------------------------------------
     4. ESPACIADO (escala base 4 px)
     -------------------------------------------------------------------------- */
  --space-0:    0;
  --space-1:    0.25rem;   /* 4  */
  --space-2:    0.5rem;    /* 8  */
  --space-3:    0.75rem;   /* 12 */
  --space-4:    1rem;      /* 16 */
  --space-5:    1.25rem;   /* 20 */
  --space-6:    1.5rem;    /* 24 */
  --space-7:    1.75rem;   /* 28 */
  --space-8:    2rem;      /* 32 */
  --space-10:   2.5rem;    /* 40 */
  --space-12:   3rem;      /* 48 */
  --space-14:   3.5rem;    /* 56 */
  --space-16:   4rem;      /* 64 */
  --space-20:   5rem;      /* 80 */
  --space-24:   6rem;      /* 96 */
  --space-28:   7rem;      /* 112 */
  --space-32:   8rem;      /* 128 */

  /* Padding por defecto de section (vertical) */
  --section-py-sm: var(--space-12);   /* 48 */
  --section-py-md: var(--space-20);   /* 80 */
  --section-py-lg: var(--space-28);   /* 112 */

  /* --------------------------------------------------------------------------
     5. CONTAINERS (anchos máximos)
     -------------------------------------------------------------------------- */
  --container-narrow:  45rem;     /* 720 px — lectura larga */
  --container-default: 75rem;     /* 1200 px — sitio general */
  --container-wide:    90rem;     /* 1440 px — hero, secciones full */
  --container-px:      1.5rem;    /* padding lateral mobile (24 px) */
  --container-px-md:   2rem;      /* desktop (32 px) */

  /* --------------------------------------------------------------------------
     6. BORDER RADIUS
     -------------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   0.125rem;   /* 2 */
  --radius-sm:   0.25rem;    /* 4 */
  --radius-md:   0.5rem;     /* 8 */
  --radius-lg:   0.75rem;    /* 12 */
  --radius-xl:   1rem;       /* 16 */
  --radius-2xl:  1.5rem;     /* 24 */
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     7. SOMBRAS
     -------------------------------------------------------------------------- */
  --shadow-none: 0 0 0 0 transparent;
  --shadow-xs:   0 1px 2px rgba(7, 37, 81, 0.04);
  --shadow-sm:   0 1px 3px rgba(7, 37, 81, 0.06), 0 1px 2px rgba(7, 37, 81, 0.04);
  --shadow-md:   0 4px 8px rgba(7, 37, 81, 0.06), 0 2px 4px rgba(7, 37, 81, 0.04);
  --shadow-lg:   0 12px 24px rgba(7, 37, 81, 0.10), 0 4px 8px rgba(7, 37, 81, 0.06);
  --shadow-xl:   0 24px 48px rgba(7, 37, 81, 0.14), 0 8px 16px rgba(7, 37, 81, 0.08);
  --shadow-2xl:  0 40px 80px rgba(7, 37, 81, 0.18);

  /* Sombras de foco (accesibilidad) */
  --shadow-focus:    0 0 0 3px rgba(246, 194, 15, 0.45);
  --shadow-focus-on-dark: 0 0 0 3px rgba(246, 194, 15, 0.7);

  /* --------------------------------------------------------------------------
     8. TRANSICIONES
     -------------------------------------------------------------------------- */
  --motion-fast:    120ms;
  --motion-base:    200ms;
  --motion-slow:    320ms;
  --motion-slower:  480ms;
  --easing-default: cubic-bezier(0.2, 0, 0, 1);          /* "expressive" */
  --easing-accel:   cubic-bezier(0.4, 0, 1, 1);
  --easing-decel:   cubic-bezier(0, 0, 0.2, 1);

  /* --------------------------------------------------------------------------
     9. Z-INDEX (capas)
     -------------------------------------------------------------------------- */
  --layer-base:        0;
  --layer-content:     10;
  --layer-sticky:      100;
  --layer-header:      200;
  --layer-overlay:     300;
  --layer-modal:       400;
  --layer-toast:       500;
  --layer-floating:    100;   /* WhatsApp, scroll-top */
  --layer-cookie:      250;
  --layer-skip:        9999;
}

/* ==========================================================================
   BREAKPOINTS DE REFERENCIA
   --------------------------------------------------------------------------
   No se pueden consumir en @media (las CSS vars no funcionan ahí), pero los
   documentamos aquí como contrato. Cualquier media query del proyecto debe
   usar EXACTAMENTE estos valores.

   --bp-sm:  37.5em  / 600 px
   --bp-md:  48em    / 768 px
   --bp-lg:  60em    / 960 px       <- breakpoint principal del sitio
   --bp-xl:  75em    / 1200 px
   --bp-2xl: 90em    / 1440 px
   ========================================================================== */

/* ==========================================================================
   MODO OSCURO (preparado para Fase 4)
   --------------------------------------------------------------------------
   Cuando se active modo oscuro, basta con definir overrides aquí.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  /* Por ahora forzamos modo claro mientras se valida diseño base.
     En Fase 4 se habilitará con :root[data-theme="dark"]. */
}