/* =========================================================================
   Mi Vínculo — Tokens
   Documentación: docs/sistema-diseno.md §2

   Este archivo SOLO contiene variables. Ni una regla de estilo.
   Los componentes usan los tokens SEMÁNTICOS (--mv-fondo, --mv-accion…).
   Los PRIMITIVOS (--mv-verde-600…) solo aparecen aquí y al definir un tono.
   ========================================================================= */

:root {
  /* ----- Primitivos: navy (marca, superficies institucionales) ----- */
  --mv-navy-900: #0e2439;
  --mv-navy-800: #16344f;
  --mv-navy-700: #1e4568;
  --mv-navy-600: #2a5b85;
  --mv-navy-200: #a8b4c2;
  --mv-navy-100: #cbd5e0;
  --mv-navy-050: #eaf0f6;

  /* ----- Primitivos: verde (acción, confianza, entrega cumplida) ----- */
  --mv-verde-800: #085440;
  --mv-verde-700: #0a6a4c;
  --mv-verde-600: #0b7a57;
  --mv-verde-500: #169670;
  --mv-verde-400: #3eb68d;
  --mv-verde-100: #cde8de;
  --mv-verde-050: #e6f4ee;

  /* ----- Primitivos: ámbar (acento afectivo) -----
     Para texto sobre fondo claro usar SIEMPRE ambar-700 (4.9:1).
     ambar-600 da 3.4:1: vale para fondos, bordes e iconos, no para texto. */
  --mv-ambar-700: #a75f12;
  --mv-ambar-600: #c87a20;
  --mv-ambar-500: #e09a38;
  --mv-ambar-100: #f6e3c8;
  --mv-ambar-050: #fbf1e3;

  /* ----- Primitivos: neutros cálidos (arena y tinta) ----- */
  --mv-blanco: #ffffff;
  --mv-arena-050: #f9f7f4;
  --mv-arena-100: #f1ede7;
  --mv-arena-200: #e2dcd3;
  --mv-arena-300: #cfc7bb;
  --mv-tinta-900: #23262b;
  --mv-tinta-700: #3d424a;
  --mv-tinta-600: #5c626c;
  --mv-tinta-400: #8a9099;

  /* ----- Primitivos: estado ----- */
  --mv-rojo-600: #b3261e;
  --mv-rojo-050: #fbeae9;

  /* ----- Primitivos: translúcidos -----
     Necesarios sobre superficies oscuras, donde un color opaco tapa el
     degradado o la imagen de fondo. Tampoco se escriben a mano fuera de aquí. */
  --mv-linea-clara-sutil: rgba(255, 255, 255, 0.1);
  --mv-linea-clara: rgba(255, 255, 255, 0.14);
  --mv-linea-clara-fuerte: rgba(255, 255, 255, 0.28);
  --mv-verde-tenue: rgba(62, 182, 141, 0.14);
  --mv-ambar-tenue: rgba(224, 154, 56, 0.14);
  --mv-navy-velo: rgba(14, 36, 57, 0.7);
  --mv-navy-difuso: rgba(14, 36, 57, 0.92);

  /* =======================================================================
     Semánticos — tono claro (por defecto)
     El tono institucional los reasigna en .mv-seccion--institucional
     ======================================================================= */
  --mv-fondo: var(--mv-arena-050);
  --mv-fondo-alterno: var(--mv-arena-100);
  --mv-fondo-elevado: var(--mv-blanco);

  --mv-texto: var(--mv-tinta-900);
  --mv-texto-suave: var(--mv-tinta-600);
  --mv-texto-tenue: var(--mv-tinta-400);

  --mv-borde: var(--mv-arena-200);
  --mv-borde-fuerte: var(--mv-arena-300);

  --mv-accion: var(--mv-verde-600);
  --mv-accion-hover: var(--mv-verde-700);
  --mv-accion-activa: var(--mv-verde-800);
  --mv-accion-texto: var(--mv-blanco);
  --mv-accion-suave: var(--mv-verde-050);

  --mv-acento: var(--mv-ambar-600);
  --mv-acento-texto: var(--mv-ambar-700);
  --mv-acento-suave: var(--mv-ambar-050);
  /* Texto legible SOBRE un fondo de acento pleno. No cambia con el tono:
     el ámbar siempre pide tinta oscura encima. */
  --mv-acento-contraste: var(--mv-tinta-900);

  --mv-foco: var(--mv-ambar-600);

  /* Familia de títulos activa. El tono institucional la cambia a la de UI. */
  --mv-fuente-titulo-activa: var(--mv-fuente-titulo);

  /* =======================================================================
     Tipografía
     ======================================================================= */
  --mv-fuente-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --mv-fuente-ui: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  --mv-texto-3xs: 0.6875rem; /* 11 */
  --mv-texto-2xs: 0.75rem; /*   12 */
  --mv-texto-xs: 0.8125rem; /*  13 */
  --mv-texto-sm: 0.875rem; /*   14 */
  --mv-texto-base: 1rem; /*      16 */
  --mv-texto-lg: 1.125rem; /*    18 */
  --mv-texto-xl: 1.25rem; /*     20 */
  --mv-texto-2xl: 1.5rem; /*     24 */
  --mv-texto-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); /*    28 → 36 */
  --mv-texto-4xl: clamp(2.125rem, 1.6rem + 2.4vw, 3rem); /*      34 → 48 */
  --mv-texto-5xl: clamp(2.5rem, 1.7rem + 3.6vw, 3.75rem); /*     40 → 60 */

  --mv-peso-normal: 400;
  --mv-peso-medio: 500;
  --mv-peso-semi: 600;
  --mv-peso-fuerte: 700;
  --mv-peso-maximo: 800;

  --mv-interlinea-compacta: 1.15;
  --mv-interlinea-normal: 1.5;
  --mv-interlinea-amplia: 1.7;

  --mv-espaciado-titulo: -0.02em;
  --mv-espaciado-etiqueta: 0.08em;

  --mv-ancho-texto: 68ch;

  /* =======================================================================
     Espaciado — base 4. No hay valores intermedios.
     ======================================================================= */
  --mv-e-1: 0.25rem; /*   4 */
  --mv-e-2: 0.5rem; /*    8 */
  --mv-e-3: 0.75rem; /*  12 */
  --mv-e-4: 1rem; /*     16 */
  --mv-e-5: 1.25rem; /*  20 */
  --mv-e-6: 1.5rem; /*   24 */
  --mv-e-8: 2rem; /*     32 */
  --mv-e-10: 2.5rem; /*  40 */
  --mv-e-12: 3rem; /*    48 */
  --mv-e-16: 4rem; /*    64 */
  --mv-e-20: 5rem; /*    80 */
  --mv-e-24: 6rem; /*    96 */

  /* =======================================================================
     Radios
     ======================================================================= */
  --mv-radio-xs: 6px;
  --mv-radio-sm: 10px;
  --mv-radio-md: 14px;
  --mv-radio-lg: 20px;
  --mv-radio-completo: 999px;

  /* =======================================================================
     Sombras — teñidas de tinta, nunca negro puro
     ======================================================================= */
  --mv-sombra-1: 0 1px 2px rgba(35, 38, 43, 0.06),
    0 1px 3px rgba(35, 38, 43, 0.05);
  --mv-sombra-2: 0 4px 12px rgba(35, 38, 43, 0.08);
  --mv-sombra-3: 0 16px 40px rgba(35, 38, 43, 0.14);

  /* =======================================================================
     Capas — no escribir un z-index literal en ningún componente
     ======================================================================= */
  --mv-z-cabecera: 100;
  --mv-z-velo: 200;
  --mv-z-modal: 210;
  --mv-z-aviso: 300;

  /* =======================================================================
     Disposición y movimiento
     ======================================================================= */
  --mv-ancho-contenedor: 1200px;
  --mv-aire-lateral: var(--mv-e-4);
  --mv-transicion: 160ms ease;
}

/* Móvil primero: el aire lateral crece con la pantalla. Sigue siendo un
   archivo de solo variables. */
@media (min-width: 40em) {
  :root {
    --mv-aire-lateral: var(--mv-e-6);
  }
}