/* ============================================================================
   TOKENS.CSS  —  El Conta 5.0   (tema claro corporativo)
   ----------------------------------------------------------------------------
   ÚNICO archivo para cambiar el diseño. Cambia un valor y toda la web cambia.
   Puedes editarlo a mano o, más fácil, con el Panel de Diseño en Vivo.
   ============================================================================ */
:root {
  /* --- 1) COLORES DE MARCA (de tu Manual de Identidad) --------------------- */
  --marca-jacarta:  #2B2D6D;   /* Azul Jacarta  — títulos                    */
  --marca-lochmara: #0072BB;   /* Azul Lochmara — azul principal / botones   */
  --marca-seagull:  #7ACCED;   /* Celeste Seagull — brillos y degradados     */
  --marca-cod:      #151414;
  --marca-white:    #FFFFFF;
  --marca-oro:      #C7A55A;    /* Dorado — SOLO como acento                  */
  --marca-oro-claro:#E4C987;

  --marca-degradado:      linear-gradient(135deg, #EAF3FB 0%, #F4F8FC 60%, #FFFFFF 100%);
  --marca-degradado-barra:linear-gradient(90deg, #2B2D6D, #0072BB, #7ACCED);

  /* --- 2) COLORES DE INTERFAZ (tema claro) -------------------------------- */
  --fondo:         #FFFFFF;    /* fondo general                              */
  --fondo-2:       #F4F6FB;    /* secciones alternas (gris muy claro)        */
  --superficie:    #FFFFFF;    /* tarjetas                                    */
  --superficie-2:  #F7F9FD;    /* hover de tarjetas                          */
  --borde:         #E3E8F2;
  --borde-suave:   #EEF1F8;

  --titulo:        #2B2D6D;    /* color de los títulos                       */
  --texto:         #2A3350;    /* texto principal                            */
  --texto-tenue:   #5A6480;    /* texto secundario                           */
  --texto-apagado: #8A93AC;

  --primario:       #0072BB;   /* botones y enlaces de acción                */
  --primario-hover: #005A95;
  --acento:         #C7A55A;   /* dorado, solo acentos pequeños              */
  --acento-hover:   #B08F45;

  --exito: #1E9E5A;  --error: #D64545;  --aviso: #C7862A;

  /* --- 3) TIPOGRAFÍA ------------------------------------------------------ */
  /* Space Grotesk + Inter (gratuitas, parecidas a Grift/Pros de tu marca).  */
  --fuente-titulo: "Space Grotesk", "Grift", system-ui, sans-serif;
  --fuente-texto:  "Inter", "Pros", system-ui, sans-serif;
  --fuente-dato:   "Space Grotesk", ui-monospace, monospace;

  --t-xs:   clamp(0.72rem, 0.70rem + 0.1vw, 0.78rem);
  --t-sm:   clamp(0.85rem, 0.82rem + 0.15vw, 0.92rem);
  --t-base: clamp(1rem,   0.96rem + 0.2vw, 1.06rem);
  --t-lg:   clamp(1.12rem, 1.02rem + 0.5vw, 1.3rem);
  --t-xl:   clamp(1.4rem,  1.15rem + 1.2vw, 1.9rem);
  --t-2xl:  clamp(1.9rem,  1.45rem + 2.2vw, 3rem);
  --t-3xl:  clamp(2.3rem,  1.7rem + 3vw,   3.9rem);

  --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 700;

  /* --- 4) ESPACIADO, BORDES Y SOMBRAS ------------------------------------ */
  --ancho-max: 1180px;
  --radio-sm: 10px;  --radio: 16px;  --radio-lg: 22px;  --radio-full: 999px;

  --sombra-suave: 0 2px 10px rgba(43,45,109,.06);
  --sombra:       0 14px 40px rgba(43,45,109,.10);
  --sombra-azul:  0 12px 30px rgba(0,114,187,.18);

  --transicion: 220ms cubic-bezier(.4, 0, .2, 1);
}